<!DOCTYPE html>


<html lang="en">


<head>
  <meta charset="utf-8" />
    
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>
     
  </title>
  <meta name="generator" content="hexo-theme-ayer">
  
  <link rel="shortcut icon" href="/favicon.ico" />
  
  
<link rel="stylesheet" href="/dist/main.css">

  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Shen-Yu/cdn/css/remixicon.min.css">

  
<link rel="stylesheet" href="/css/custom.css">

  
  
<script src="https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script>

  
  

  

</head>

</html>

<body>
  <div id="app">
    
      
      <canvas width="1777" height="841"
        style="position: fixed; left: 0px; top: 0px; z-index: 99999; pointer-events: none;"></canvas>
      
    <main class="content on">
      
<section class="cover">
    
  <div class="cover-frame">
    <div class="bg-box">
      <img src="/images/82752296_p0.jpg" alt="image frame" />
    </div>
    <div class="cover-inner text-center text-white">
      <h1><a href="/">Doreen&#39;s Blog</a></h1>
      <div id="subtitle-box">
        
        <span id="subtitle"></span>
        
      </div>
      <div>
        
      </div>
    </div>
  </div>
  <div class="cover-learn-more">
    <a href="javascript:void(0)" class="anchor"><i class="ri-arrow-down-line"></i></a>
  </div>
</section>



<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11/lib/typed.min.js"></script>


<!-- Subtitle -->

  <script>
    try {
      var typed = new Typed("#subtitle", {
        strings: ['一切都会好的，城南的花都开了', '今晚的月色真美', '注重过程，别在乎结果'],
        startDelay: 0,
        typeSpeed: 200,
        loop: true,
        backSpeed: 100,
        showCursor: true
      });
    } catch (err) {
      console.log(err)
    }
  </script>
  
<div id="main">
  <section class="outer">
  
  

<div class="notice" style="margin-top:50px">
    <i class="ri-heart-fill"></i>
    <div class="notice-content" id="broad"></div>
</div>
<script type="text/javascript">
    fetch('https://v1.hitokoto.cn')
        .then(response => response.json())
        .then(data => {
            document.getElementById("broad").innerHTML = data.hitokoto;
        })
        .catch(console.error)
</script>

<style>
    .notice {
        padding: 20px;
        border: 1px dashed #e6e6e6;
        color: #969696;
        position: relative;
        display: inline-block;
        width: 100%;
        background: #fbfbfb50;
        border-radius: 10px;
    }

    .notice i {
        float: left;
        color: #999;
        font-size: 16px;
        padding-right: 10px;
        vertical-align: middle;
        margin-top: -2px;
    }

    .notice-content {
        display: initial;
        vertical-align: middle;
    }
</style>
  
  <article class="articles">
    
    
    
    
    <article
  id="post-JEPaaS"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2022/03/08/JEPaaS/"
    >JEPaaS</a> 
</h2>
 

    </header>
     
    <div class="article-meta">
      <a href="/2022/03/08/JEPaaS/" class="article-date">
  <time datetime="2022-03-08T04:21:42.000Z" itemprop="datePublished">2022-03-08</time>
</a> 
  <div class="article-category">
    <a class="article-category-link" href="/categories/JEPaaS/">JEPaaS</a>
  </div>
   
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <h2 id="相关文档"><a href="#相关文档" class="headerlink" title="相关文档"></a>相关文档</h2><p>· <a target="_blank" rel="noopener" href="https://doc.jepaas.com/docs/je_doc_jepaas">JEPaaS 帮助文档</a><br>· <a target="_blank" rel="noopener" href="https://doc.jepaas.com/docs/je-doc-api">JEPaaS API文档</a><br>· <a target="_blank" rel="noopener" href="http://extjs-doc-cn.github.io/ext4api/">Ext 中文文档</a>  </p>
<h2 id="前端目录结构"><a href="#前端目录结构" class="headerlink" title="前端目录结构"></a>前端目录结构</h2><h3 id="je-paas-frontend-PC端平台源码目录结构"><a href="#je-paas-frontend-PC端平台源码目录结构" class="headerlink" title="je-paas-frontend (PC端平台源码目录结构)"></a>je-paas-frontend (PC端平台源码目录结构)</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br></pre></td><td class="code"><pre><span class="line">├── config                    // 调试打包运行脚本</span><br><span class="line">│   ├── config.js             // 配置文件入口</span><br><span class="line">│   ├── gulp                  // 打包程序配置文件</span><br><span class="line">│   │   ├── gulp-build.js     // 打包文件--构建文件</span><br><span class="line">│   │   ├── gulp-config.json  // 打包程序配置文件，每次发布新包，请同步更新version属性</span><br><span class="line">│   │   ├── gulp-copy.js      // 打包文件--复制文件</span><br><span class="line">│   │   └── gulp-rev.js       // 打包文件--加MD5版本</span><br><span class="line">│   ├── pro</span><br><span class="line">│   │   └── jepaas.json       // 环境配置</span><br><span class="line">│   └── resourse</span><br><span class="line">│       └── holiday           // 登录页面背景图，主题色配置</span><br><span class="line">├── dev.js                    // 代理服务程序--开发环境</span><br><span class="line">├── doc</span><br><span class="line">│   └── Framework.MD          // 帮组文档</span><br><span class="line">├── gulpfile.js               // 打包程序</span><br><span class="line">├── package.json              // node配置文件，通过 npm install 安装项目所需要的依赖</span><br><span class="line">├── product.cdn.js            // cdn代理服务脚本</span><br><span class="line">├── product.js                // 代理服务</span><br><span class="line">├── src                       // 业务代码 </span><br><span class="line">│   ├── config</span><br><span class="line">│   │   ├── i18n              // 国际化配置，中英文</span><br><span class="line">│   │   ├── incloud           // 初始化项目时候引入的资源（css &amp;&amp; js）</span><br><span class="line">│   │   ├── static            // 平台用到的图片进行封装，JE.static</span><br><span class="line">│   │   └── urls              // 平台所有接口路径封装 体验：JE.getUrlMaps(&#x27;method.doUpdateList&#x27;)</span><br><span class="line">│   ├── extjs</span><br><span class="line">│   │   ├── app               // 平台页面的主入口</span><br><span class="line">│   │   ├── app.js            // 系统主应用程序  一切应用的入口程序</span><br><span class="line">│   │   ├── app4single        // 单功能挂接（http://doc.jepaas.com/docs/je-doc-repository-know/je-doc-repository-know-1cgeaq631gblt）</span><br><span class="line">│   │   ├── core              // 核心包（核心组件 &amp;&amp; 核心面板 等）</span><br><span class="line">│   │   │   ├── action        // 操作方法</span><br><span class="line">│   │   │   ├── controller    // 控制器</span><br><span class="line">│   │   │   ├── store         // 数据存储</span><br><span class="line">│   │   │   ├── ux            // 核心组件</span><br><span class="line">│   │   │   ├── view          // 核心面板</span><br><span class="line">│   │   ├── sys               // 业务代码</span><br><span class="line">│   │   │   ├── busflow       // 文档管理(已经废弃)</span><br><span class="line">│   │   │   ├── calendar      // 日历</span><br><span class="line">│   │   │   ├── chart         // 图表</span><br><span class="line">│   │   │   ├── companyinfo   // 公司信息编辑</span><br><span class="line">│   │   │   ├── configuration // 系统设置面板(已经废弃)</span><br><span class="line">│   │   │   ├── dataimpl      // 未知</span><br><span class="line">│   │   │   ├── dd            // 数据字典</span><br><span class="line">│   │   │   ├── documentation // (已经废弃)</span><br><span class="line">│   │   │   ├── email         // 邮件(已经废弃)</span><br><span class="line">│   │   │   ├── exam          // 考试(已经废弃)</span><br><span class="line">│   │   │   ├── file          // 文档管理(已经废弃)</span><br><span class="line">│   │   │   ├── flowchart     // 流程图</span><br><span class="line">│   │   │   ├── formdesigner  // 表单设计器</span><br><span class="line">│   │   │   ├── funccfg       // 功能配置</span><br><span class="line">│   │   │   ├── icon          // 图标</span><br><span class="line">│   │   │   ├── im            // 即时通讯(已经废弃)</span><br><span class="line">│   │   │   ├── menu          // 菜单管理</span><br><span class="line">│   │   │   ├── phone         // JEAPP配置</span><br><span class="line">│   │   │   ├── plantform     // (已经废弃)</span><br><span class="line">│   │   │   ├── portal        // 门户引擎</span><br><span class="line">│   │   │   ├── processinfo   // (已经废弃)</span><br><span class="line">│   │   │   ├── qrcode        // 二维码</span><br><span class="line">│   │   │   ├── rbac          // 权限</span><br><span class="line">│   │   │   ├── roster        // 花名册</span><br><span class="line">│   │   │   ├── sass          // sass</span><br><span class="line">│   │   │   ├── shop          // 商城 已废弃</span><br><span class="line">│   │   │   ├── singleton     // js&amp;&amp;css代码编辑器</span><br><span class="line">│   │   │   ├── survey        // 问卷调查(已经废弃)</span><br><span class="line">│   │   │   ├── svg           // 工业图</span><br><span class="line">│   │   │   ├── table         // 资源表</span><br><span class="line">│   │   │   ├── transaction   // 事务交办(已经废弃)</span><br><span class="line">│   │   │   ├── upgrade       // 系统设置表单(已经废弃)</span><br><span class="line">│   │   │   ├── workflow      // 工作流编辑器</span><br><span class="line">│   │   │   ├── workflowfunc  // 工作流</span><br><span class="line">│   │   ├── tool              // 加载系统类和和核心化组件</span><br><span class="line">│   │   ├── util              // 封装的类</span><br><span class="line">│   │   └── vue               // vue工具类</span><br><span class="line">│   ├── main                  // html模板页</span><br><span class="line">│   └── static                // 静态资源</span><br><span class="line">├── static                    // 静态资源目录</span><br><span class="line">├── CHANGELOG.md              // 帮助文档</span><br><span class="line">├── README.MD                 // 帮助文档</span><br><span class="line">├── README2.md                // 帮助文档</span><br><span class="line">├── commitlint.config.js      // 代码提交规则</span><br></pre></td></tr></table></figure>

<h3 id="je-paas-frontend-plugin-PC插件源码目录结构"><a href="#je-paas-frontend-plugin-PC插件源码目录结构" class="headerlink" title="je-paas-frontend-plugin (PC插件源码目录结构)"></a>je-paas-frontend-plugin (PC插件源码目录结构)</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line">├── config                    // 打包程序配置目录</span><br><span class="line">│   ├── config                </span><br><span class="line">│   │   ├── components.js     // 配置打包平台的业务组件</span><br><span class="line">│   │   └── jepaas.js         // 配置文件</span><br><span class="line">│   ├── config.js             // 基础配置文件</span><br><span class="line">│   ├── package               // 打包配置文件</span><br><span class="line">│   │   ├── gulp              // gulp打包</span><br><span class="line">│   │   ├── tpl               // webpack打包模板页</span><br><span class="line">│   │   └── webpack           // webpack打包vue</span><br><span class="line">│   ├── resourse              // 项目资源文件</span><br><span class="line">│   │   ├── holiday           // 修改登录页面的配置信息</span><br><span class="line">│   │   └── project           </span><br><span class="line">│   └── server</span><br><span class="line">│       └── dev.js            // express服务文件</span><br><span class="line">├── dist                      // 打包之后的资源</span><br><span class="line">├── docs                      // home和im插件说明文档  </span><br><span class="line">│   ├── assets</span><br><span class="line">│   │   └── images</span><br><span class="line">│   └── plugin</span><br><span class="line">│       ├── home</span><br><span class="line">│       └── im</span><br><span class="line">├── gulpfile.js               // 项目打包配置</span><br><span class="line">├── index.html                // html</span><br><span class="line">├── jsconfig.json             // 指定根目录和JavaScript服务提供的功能选项</span><br><span class="line">├── package.json              // 项目脚本和所需依赖</span><br><span class="line">└── src                       // 业务功能</span><br><span class="line">    ├── tpl                   // 模板</span><br><span class="line">    │   ├── formPreview       // 表单规划器模板</span><br><span class="line">    │   ├── login             // 登录模板</span><br><span class="line">    │   └── priceSheet        // 报价单模板</span><br><span class="line">    └── vue                   // vue插件</span><br><span class="line">        ├── components        // 组件</span><br><span class="line">        ├── install.js        // 安装插件所需的方法</span><br><span class="line">        ├── modules           // 业务插件</span><br><span class="line">        ├── plugins             </span><br><span class="line">        └── static</span><br><span class="line">├── commitlint.config.js       // 代码提交规则</span><br><span class="line">├── CHANGELOG.md               // 帮助文档</span><br><span class="line">├── README.MD                  // 帮助文档</span><br><span class="line">├── README1.md                 // 帮助文档</span><br></pre></td></tr></table></figure>

<h2 id="二次开发"><a href="#二次开发" class="headerlink" title="二次开发"></a>二次开发</h2><h3 id="全局插件"><a href="#全局插件" class="headerlink" title="全局插件"></a><a target="_blank" rel="noopener" href="https://doc.jepaas.com/docs/je_doc_jepaas//1713">全局插件</a></h3><h4 id="创建-插件项目"><a href="#创建-插件项目" class="headerlink" title="创建(插件项目)"></a>创建(插件项目)</h4><ol>
<li>创建<code>index.vue</code>文件 (src/vue/components/<code>name</code>/index.vue) ; 写入组件页面内容</li>
</ol>
<blockquote>
<p>name好像不能使用驼峰命名</p>
</blockquote>
<ol start="2">
<li><p>创建<code>index.js</code>文件 (src/vue/components/<code>name</code>/index.js) ; 安装组件</p>
</li>
<li><p>插件写入<code>components.js</code>配置文件中进行编译 (config/config/components.js)</p>
</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    ...</span><br><span class="line">  entry: [...,<span class="string">&#x27;name&#x27;</span>], <span class="comment">// 打包的入口</span></span><br><span class="line">    ...</span><br><span class="line">&#125;;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ol start="4">
<li>代码运行的时候 就会自动编译该插件 并在 (dist/static/vue/components/<code>name</code>)中输出编译完成的文件</li>
</ol>
<h4 id="使用-源码项目"><a href="#使用-源码项目" class="headerlink" title="使用(源码项目)"></a>使用(源码项目)</h4><ol>
<li>在JE的vue工具类中添加自定义扩展方法  (src/extjs/vue/util.js)</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line">Ext.define(<span class="string">&#x27;JE.vue.util&#x27;</span>, &#123;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">   * vue弹框,统一调用</span></span><br><span class="line"><span class="comment">   * element: 元素属性，&#123;id: 组件id，name: 组件名称&#125;</span></span><br><span class="line"><span class="comment">   * 建议命名规则：</span></span><br><span class="line"><span class="comment">     组件name=&#123;子系统名&#125;-&#123;头部/左侧菜单名&#125;-&#123;功能名&#125;-&#123;操作名&#125;；</span></span><br><span class="line"><span class="comment">     组件id=id-&#123;组件name&#125;</span></span><br><span class="line"><span class="comment">   * options: 业务属性</span></span><br><span class="line"><span class="comment">   */</span></span><br><span class="line">  showVueDialog: <span class="function"><span class="keyword">function</span>(<span class="params">element, options</span>) </span>&#123;</span><br><span class="line">    JE.loadScript(</span><br><span class="line">      [<span class="string">&#x27;/static/vue/components/&#x27;</span> + element.name + <span class="string">&#x27;/index.js&#x27;</span>, <span class="string">&#x27;/static/vue/components/&#x27;</span> + element.name + <span class="string">&#x27;/index.css&#x27;</span>],</span><br><span class="line">      <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="comment">//插件模板</span></span><br><span class="line">        <span class="keyword">var</span> tpl =</span><br><span class="line">          <span class="string">&#x27;&lt;&#x27;</span> +</span><br><span class="line">          element.name +</span><br><span class="line">          <span class="string">&#x27; @confirm=&quot;handleConfrim&quot; @callback=&quot;callback&quot; :params=&quot;params&quot;&gt;&lt;/&#x27;</span> +</span><br><span class="line">          element.name +</span><br><span class="line">          <span class="string">&#x27;&gt;&#x27;</span>;</span><br><span class="line"></span><br><span class="line">        <span class="comment">// 如果存在 弹窗  先清除掉</span></span><br><span class="line">        <span class="keyword">if</span> (<span class="built_in">document</span>.getElementById(element.id)) &#123;</span><br><span class="line">          JE.removeElement(<span class="built_in">document</span>.getElementById(element.id));</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">//装载容器</span></span><br><span class="line">        <span class="keyword">var</span> div = <span class="built_in">document</span>.createElement(<span class="string">&#x27;div&#x27;</span>);</span><br><span class="line">        div.setAttribute(<span class="string">&#x27;id&#x27;</span>, element.id);</span><br><span class="line">        div.innerHTML = tpl;</span><br><span class="line">        <span class="keyword">var</span> el = Ext.getBody().appendChild(div);</span><br><span class="line">        <span class="keyword">var</span> params = options;</span><br><span class="line">        <span class="comment">//显示</span></span><br><span class="line">        params.visible = <span class="literal">true</span>;</span><br><span class="line">        <span class="comment">//载入页面</span></span><br><span class="line">        <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">          el: el.dom,</span><br><span class="line">          data: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="keyword">return</span> &#123;</span><br><span class="line">              params: params</span><br><span class="line">            &#125;;</span><br><span class="line">          &#125;,</span><br><span class="line">          methods: &#123;</span><br><span class="line">            callback: <span class="function"><span class="keyword">function</span>(<span class="params">num</span>) </span>&#123;</span><br><span class="line">              <span class="keyword">return</span> options.callback &amp;&amp; options.callback(num);</span><br><span class="line">            &#125;,</span><br><span class="line">            handleConfrim() &#123;</span><br><span class="line">              <span class="comment">// 发送请求，刷新</span></span><br><span class="line">              <span class="built_in">console</span>.log(<span class="string">&#x27;确认&#x27;</span>);</span><br><span class="line">            &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;);</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="literal">true</span></span><br><span class="line">    );</span><br><span class="line">  &#125;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ol start="2">
<li>在系统中进行配置,使用<code>JE.vue.xxx()</code></li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment">// 在按钮点击事件中进行配置</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span>(<span class="params">btn,model,</span>)</span>&#123;</span><br><span class="line">    JE.vue.showVueDialog(</span><br><span class="line">        &#123; <span class="attr">name</span>:<span class="string">&#x27;transfer&#x27;</span>,<span class="attr">id</span>:<span class="string">&#x27;jevue-transfer&#x27;</span> &#125;,</span><br><span class="line">        &#123; <span class="attr">info</span>:model.data &#125;</span><br><span class="line">        )</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="Vue插件开发"><a href="#Vue插件开发" class="headerlink" title="Vue插件开发"></a><a target="_blank" rel="noopener" href="https://doc.jepaas.com/docs/je_doc_jepaas/je_doc_jepaas-1d7js8b082ko0">Vue插件开发</a></h3><h4 id="一、Vue插件编写"><a href="#一、Vue插件编写" class="headerlink" title="一、Vue插件编写"></a>一、Vue插件编写</h4><ol>
<li><p>创建<code>index.vue</code>文件 (src/vue/modules/<code>name</code>/index.vue) ; 写入插件页面内容</p>
</li>
<li><p>创建<code>index.js</code>文件 (src/vue/modules/<code>name</code>/index.js) ; 安装组件</p>
</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123; install &#125; <span class="keyword">from</span> <span class="string">&#x27;../../install.js&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> index <span class="keyword">from</span> <span class="string">&#x27;./index.vue&#x27;</span>;</span><br><span class="line"><span class="comment">// 加载echarts依赖</span></span><br><span class="line">JE.loadChartScript(<span class="literal">true</span>);</span><br><span class="line"><span class="comment">// 安装组件</span></span><br><span class="line">install(<span class="string">&#x27;Name&#x27;</span>, index);</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ol start="3">
<li>插件写入<code>jepaas.js</code>配置文件中进行编译 (config/config/jepaas.js)</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    ...</span><br><span class="line">    entry:[</span><br><span class="line">        ...</span><br><span class="line">        <span class="string">&#x27;name&#x27;</span></span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ol start="4">
<li>代码运行的时候 就会自动编译该插件 并在 (dist/pro/<code>name</code>/View.js)中输出编译完成的文件</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// PRO.name.View 为插件的名字 使用的时候直接通过这个名字使用</span></span><br><span class="line">Ext.define(<span class="string">&quot;PRO.name.View&quot;</span>, &#123;</span><br><span class="line">  extend: <span class="string">&#x27;Ext.panel.Panel&#x27;</span>,</span><br><span class="line">  alias:<span class="string">&#x27;widget.pro.name&#x27;</span>,</span><br><span class="line">  border: <span class="number">0</span>,</span><br><span class="line">  layout: <span class="string">&#x27;fit&#x27;</span></span><br><span class="line">  ...</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<h4 id="二、平台渲染Vue插件"><a href="#二、平台渲染Vue插件" class="headerlink" title="二、平台渲染Vue插件"></a>二、平台渲染Vue插件</h4><ol>
<li>通过插件的形式挂载（只有插件内容）</li>
</ol>
<ul>
<li>新建菜单功能的时候，类型选择<code>插件</code></li>
<li>信息 为 <code>JE_PLUGIN_NAME,PRO.name.View</code></li>
<li>点击授权给开发人员</li>
</ul>
<p><img src="https://i.bmp.ovh/imgs/2022/03/027ba136be193704.png"></p>
<ol start="2">
<li>通过表单方法渲染的时候挂载（有别的内容）</li>
</ol>
<ul>
<li>不管之前的菜单的类型为什么</li>
<li>在表单渲染后<code>afterrender</code> 在面板中插入该插件的内容</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span>(<span class="params">self</span>)</span>&#123;</span><br><span class="line">    <span class="comment">// ------直接覆盖以前的内容，放在顶部</span></span><br><span class="line">    <span class="keyword">var</span> panel = Ext.create(<span class="string">&#x27;PRO.name.View&#x27;</span>,&#123;</span><br><span class="line">        height:<span class="number">300</span>,</span><br><span class="line">        dock:<span class="string">&#x27;top&#x27;</span>,</span><br><span class="line">        vueInfo:&#123;</span><br><span class="line">            params:&#123;</span><br><span class="line">                formValue:self.getValues()</span><br><span class="line">            &#125;,</span><br><span class="line">            callback:<span class="function"><span class="keyword">function</span>(<span class="params">formValue</span>)</span>&#123;</span><br><span class="line">                self.getFields(<span class="string">&#x27;SCHOOL_XX&#x27;</span>).setValue(formValue.aaa);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;);</span><br><span class="line">    self.addDocked(panel);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    <span class="comment">// ------在以前的内容后添加</span></span><br><span class="line">    <span class="keyword">var</span> grid = self;</span><br><span class="line">    <span class="comment">//创建组件</span></span><br><span class="line">    <span class="keyword">var</span> demoGrid = Ext.create(<span class="string">&#x27;PRO.name.view&#x27;</span>,&#123;</span><br><span class="line">        region:<span class="string">&#x27;south&#x27;</span>,</span><br><span class="line">        height:<span class="number">300</span>,</span><br><span class="line">        mainGrid:grid</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="comment">//加载到列表的父容器下方，父容器布局是border</span></span><br><span class="line">    grid.demoGrid = grid.ownerCt.add(demoGrid);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h4 id="Vue与平台通信"><a href="#Vue与平台通信" class="headerlink" title="Vue与平台通信"></a>Vue与平台通信</h4><ul>
<li>数据传递</li>
</ul>
<ol>
<li>平台通过 <code>vueInfo.params</code> 传递数据给vue</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">vueInfo:&#123;</span><br><span class="line">    params:&#123;</span><br><span class="line">        value1:<span class="string">&#x27;&#x27;</span>,</span><br><span class="line">        value2:<span class="string">&#x27;&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>Vue通过props接收传递过来的数据</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> defualt&#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">    props:&#123;</span><br><span class="line">        params:&#123;</span><br><span class="line">            type:<span class="built_in">Object</span></span><br><span class="line">        &#125;</span><br><span class="line">        <span class="comment">// ...</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>Vue实时展示</li>
</ul>
<blockquote>
<p>给获取的字段添加<code>change</code>事件</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span>(<span class="params">filed,value,eOpts</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> domeView = field.up(<span class="string">&#x27;jeeditview&#x27;</span>).down(<span class="string">&#x27;[xtype=pro.name]&#x27;</span>);</span><br><span class="line">    <span class="keyword">if</span>(domeView &amp;&amp; domeView.vm)&#123;</span><br><span class="line">        domeView.vm.params.formValue.SCHOOL_XXLS = value;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ul>
<li>方法传递</li>
</ul>
<ol>
<li>平台通过 <code>vueInfo.callback</code> 改变数据库的值</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">vueInfo:&#123;</span><br><span class="line">    callback:<span class="function"><span class="keyword">function</span>(<span class="params">formValue</span>)</span>&#123;</span><br><span class="line">        self.getFields(<span class="string">&#x27;SCHOOL_XX&#x27;</span>).setValue(formValue.aaa);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ol start="2">
<li>Vue通过<code>props</code>接入传入的方法</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">props: &#123;</span><br><span class="line">    callback: &#123;</span><br><span class="line">      type: <span class="built_in">Function</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure>

<ol start="3">
<li>挂载事件执行方法</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&lt;button @click=<span class="string">&quot;showContent&quot;</span>&gt;点击&lt;/button&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// ...</span></span><br><span class="line">methods:&#123;</span><br><span class="line">    showContent()&#123;</span><br><span class="line">        <span class="built_in">this</span>.callback(&#123;<span class="attr">aaa</span>:<span class="built_in">this</span>.formValue.SCHOOL_XXLS&#125;)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="Ext-js二次开发"><a href="#Ext-js二次开发" class="headerlink" title="Ext.js二次开发"></a><a target="_blank" rel="noopener" href="https://doc.jepaas.com/docs/je_doc_jepaas/je_doc_jepaas-1d6c2afottsi1">Ext.js二次开发</a></h3><blockquote>
<p>下了gitee里面的开源项目 按文档流程配置了一边，是可以运行的 效果如下：</p>
</blockquote>
<p><img src="https://i.bmp.ovh/imgs/2022/03/86b568c92ae0c4dd.png"></p>
<ol>
<li>创建自定义功能视图</li>
</ol>
<blockquote>
<p>src/pc/ext/demo/view/GridView.js</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// PRO.demo.view.GridView 这个面板的名称，唯一性指向（按项目路径命名 应该）</span></span><br><span class="line"><span class="comment">// 并且需要通过在工具类中挂载 才能使用 </span></span><br><span class="line"><span class="comment">// 用ext创建一个Panel一个容器 存放数据列表</span></span><br><span class="line"><span class="comment">// me.store.loadData 和 loadData 应该不是一个方法，me.store.loadData估计是Ext的内置方法，用来展示动态数据</span></span><br><span class="line"><span class="comment">// 模板中的html变量需要用 &#123;html:&#x27;xxx&#x27;&#125; 这种结构来展示</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 自定义功能的视图</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line">Ext.define(<span class="string">&quot;PRO.demo.view.GridView&quot;</span>, &#123;</span><br><span class="line">    extend: <span class="string">&#x27;Ext.panel.Panel&#x27;</span>,</span><br><span class="line">    alias: <span class="string">&#x27;widget.demo.gridview&#x27;</span>,</span><br><span class="line">    layout: <span class="string">&#x27;fit&#x27;</span>,</span><br><span class="line">    initComponent: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> me = <span class="built_in">this</span>;</span><br><span class="line">        me.store = Ext.create(<span class="string">&#x27;Ext.data.Store&#x27;</span>, &#123; <span class="attr">fields</span>: [<span class="string">&#x27;html&#x27;</span>], <span class="attr">data</span>: [] &#125;)</span><br><span class="line">        <span class="comment">//数据视图</span></span><br><span class="line">        me.items = [</span><br><span class="line">            &#123;</span><br><span class="line">                xtype: <span class="string">&#x27;dataview&#x27;</span>,</span><br><span class="line">                itemId: <span class="string">&#x27;view&#x27;</span>,</span><br><span class="line">                store: me.store,</span><br><span class="line">                autoScroll: <span class="literal">true</span>,</span><br><span class="line">                itemSelector: <span class="string">&#x27;div.demo-list-item-wrap&#x27;</span>,</span><br><span class="line">                emptyText: <span class="string">&#x27;&lt;div style=&quot;padding:20px;text-align:center;color:#444;font-size:20px;&quot;&gt;没有数据&lt;/div&gt;&#x27;</span>,</span><br><span class="line">                tpl: [</span><br><span class="line">                    <span class="string">&#x27;&lt;tpl for=&quot;.&quot;&gt;&#x27;</span>,</span><br><span class="line">                    <span class="string">&#x27;&lt;div class=&quot;demo-list-item-wrap&quot; style=&quot;padding:10px;&quot;&gt;&#x27;</span>,</span><br><span class="line">                    <span class="string">&#x27;&#123;html&#125;&#x27;</span>,</span><br><span class="line">                    <span class="string">&#x27;&lt;/div&gt;&#x27;</span>,</span><br><span class="line">                    <span class="string">&#x27;&lt;/tpl&gt;&#x27;</span></span><br><span class="line">                ]</span><br><span class="line">            &#125;];</span><br><span class="line">        <span class="comment">//功能按钮</span></span><br><span class="line">        <span class="comment">/* me.tbar = &#123;</span></span><br><span class="line"><span class="comment">            cls: &#x27;je-button-bar&#x27;,</span></span><br><span class="line"><span class="comment">            items: [&#123;</span></span><br><span class="line"><span class="comment">                text: &#x27;获取选中的数据&#x27;,</span></span><br><span class="line"><span class="comment">                handler: function (btn) &#123;</span></span><br><span class="line"><span class="comment">                    //主功能列表</span></span><br><span class="line"><span class="comment">                    var grid = me.mainGrid;</span></span><br><span class="line"><span class="comment">                    //获取选中的数据</span></span><br><span class="line"><span class="comment">                    var sels = grid.getSelectionModel().getSelection();</span></span><br><span class="line"><span class="comment">                    if (JE.isEmpty(sels)) &#123;</span></span><br><span class="line"><span class="comment">                        JE.alert(&#x27;请选择数据！&#x27;);</span></span><br><span class="line"><span class="comment">                    &#125; else &#123;</span></span><br><span class="line"><span class="comment">                        JE.alert(&#x27;选中了&#x27; + sels.length + &#x27;条数据!&#x27;);</span></span><br><span class="line"><span class="comment">                        console.log(&#x27;选中的主表数据&#x27;, sels)</span></span><br><span class="line"><span class="comment">                    &#125;</span></span><br><span class="line"><span class="comment">                &#125;</span></span><br><span class="line"><span class="comment">            &#125;]</span></span><br><span class="line"><span class="comment">        &#125;; */</span></span><br><span class="line">        me.callParent(<span class="built_in">arguments</span>);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * 加载数据</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@param <span class="type">&#123;jegridview&#125;</span> </span>grid 主功能列表</span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    loadData: <span class="function"><span class="keyword">function</span> (<span class="params">grid</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> me = <span class="built_in">this</span>, data = [];</span><br><span class="line"></span><br><span class="line">        <span class="comment">//循环列表数据</span></span><br><span class="line">        grid.store.each(<span class="function"><span class="keyword">function</span> (<span class="params">rec</span>) </span>&#123;</span><br><span class="line">            <span class="keyword">var</span> html = [];</span><br><span class="line">            <span class="comment">//读取列表的数据，进行展示</span></span><br><span class="line">            Ext.each(<span class="built_in">Object</span>.keys(rec.data), <span class="function"><span class="keyword">function</span> (<span class="params">key, i</span>) </span>&#123;</span><br><span class="line">                <span class="comment">// html.push(key + &#x27;：&#x27; + rec.get(key));</span></span><br><span class="line">                html.push(rec.get(key))</span><br><span class="line">                <span class="comment">// if (i &gt; 3) return;</span></span><br><span class="line">            &#125;)</span><br><span class="line">            data.push(&#123; <span class="attr">html</span>: html.join(<span class="string">&#x27;,&#x27;</span>) + <span class="string">&#x27;&lt;hr&gt;&lt;br/&gt;&#x27;</span> &#125;);</span><br><span class="line">        &#125;);</span><br><span class="line">        me.store.loadData(data);</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;展示所有列表数据&#x27;</span>)</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * 单击主列表 获取数据 </span></span><br><span class="line"><span class="comment">     * <span class="doctag">@param <span class="type">&#123;*&#125;</span> </span>view </span></span><br><span class="line"><span class="comment">     * <span class="doctag">@param <span class="type">&#123;*&#125;</span> </span>record </span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    handleClick(view, record) &#123;</span><br><span class="line">        <span class="keyword">var</span> itemData = <span class="built_in">Object</span>.values(record.raw).join(<span class="string">&#x27;,&#x27;</span>)</span><br><span class="line">        <span class="keyword">var</span> me = <span class="built_in">this</span></span><br><span class="line">        me.store.loadData([&#123; <span class="attr">html</span>: itemData &#125;]);</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;展示点击的那一条数据&#x27;</span>, itemData)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ol start="2">
<li>自定义插件挂接到MainController中</li>
</ol>
<blockquote>
<p>src/pc/ext/demo/contoller/MainController.js</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// PRO.demo.controller.MainController 工具类的名称 很重要需要在表格功能内配置</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 自定义功能主控制器</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line">Ext.define(<span class="string">&quot;PRO.demo.controller.MainController&quot;</span>, &#123;</span><br><span class="line">  extend: <span class="string">&#x27;Ext.app.Controller&#x27;</span>,</span><br><span class="line">  init: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> self = <span class="built_in">this</span>;</span><br><span class="line">    <span class="keyword">var</span> ctr = &#123;&#125;</span><br><span class="line">    self.control(&#123;ctr&#125;);</span><br><span class="line">  &#125;,</span><br><span class="line">  views: [</span><br><span class="line">    <span class="comment">//加载引用的面板</span></span><br><span class="line">    <span class="string">&#x27;PRO.demo.view.GridView&#x27;</span>, <span class="comment">//列表</span></span><br><span class="line">  ]</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<ol start="3">
<li>在页面进行配置，把MainController挂载到页面上</li>
</ol>
<p><img src="https://doc.jepaas.com/uploads/je-train-data/images/m_ed1e78778df3c6732b3c0eeac9923ae3_r.png"></p>
<ol start="4">
<li>配置相应的事件</li>
</ol>
<ul>
<li>渲染后创建组件，并添加在父组件的下方</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ext相关语法 我也不清楚..</span></span><br><span class="line"><span class="comment">// PRO.demo.view.GridView 自定义面板创建完成，并配置相应内容</span></span><br><span class="line"><span class="comment">// 添加在页面上,并且self对象添加了一个demoGrid属性，里面是自定义面板的相关内容</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span>(<span class="params">self</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> grid = self;</span><br><span class="line">    <span class="comment">//创建组件</span></span><br><span class="line">    <span class="keyword">var</span> demoGrid = Ext.create(<span class="string">&#x27;PRO.demo.view.GridView&#x27;</span>,&#123;<span class="attr">region</span>:<span class="string">&#x27;south&#x27;</span>,<span class="attr">height</span>:<span class="number">400</span>,<span class="attr">mainGrid</span>:grid&#125;);</span><br><span class="line">    <span class="comment">//加载到列表的父容器下方，父容器布局是border</span></span><br><span class="line">    grid.demoGrid = grid.ownerCt.add(demoGrid);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src="https://doc.jepaas.com/uploads/je-train-data/images/m_ab302b6ac877684e65a1449abf9e44c2_r.png"></p>
<ul>
<li>添加load监听事件、获取主数据</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 获取到自定义面板的对象grid.demoGrid后</span></span><br><span class="line"><span class="comment">// 执行他的自定义方法loadData获取全部的主数据</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span>(<span class="params">store,records</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> grid = store.gridObj</span><br><span class="line">    <span class="comment">//执行demo插件的方法</span></span><br><span class="line">    grid.demoGrid.loadData(grid);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src="https://doc.jepaas.com/uploads/je-train-data/images/m_db2b6054f689960bcc3beea9a5827df3_r.png"></p>
<ul>
<li>然后照葫芦画瓢、添加单击事件、获取点击的数据</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 前两段是系统默认的，应该是获取到列表对象</span></span><br><span class="line"><span class="comment">// 通过grid.demoGrid获取到自定义面板的内容</span></span><br><span class="line"><span class="comment">// 并触发点击事件的方法</span></span><br><span class="line"><span class="comment">// me.store.loadData([&#123; html: xxx &#125;]); 重新传递html变量的数据</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span>(<span class="params">view,record</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> grid = view.panel;</span><br><span class="line"> grid = view.lockingPartner?grid.ownerCt:grid;</span><br><span class="line">    </span><br><span class="line">    grid.demoGrid.handleClick(view,record);</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p><img src="https://i.bmp.ovh/imgs/2022/03/2751fe1e58e73140.png"></p>
 
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
    </footer>
  </div>

    
 
   
</article>

    
    <article
  id="post-待处理问题"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2022/02/17/%E5%BE%85%E5%A4%84%E7%90%86%E9%97%AE%E9%A2%98/"
    >问题集</a> 
</h2>
 

    </header>
     
    <div class="article-meta">
      <a href="/2022/02/17/%E5%BE%85%E5%A4%84%E7%90%86%E9%97%AE%E9%A2%98/" class="article-date">
  <time datetime="2022-02-17T02:21:42.000Z" itemprop="datePublished">2022-02-17</time>
</a> 
  <div class="article-category">
    <a class="article-category-link" href="/categories/%E9%97%AE%E9%A2%98%E9%9B%86/">问题集</a>
  </div>
   
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <h2 id="Object-keys-amp-for…in-顺序"><a href="#Object-keys-amp-for…in-顺序" class="headerlink" title="Object.keys() &amp; for…in 顺序"></a><a target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/40601459">Object.keys() &amp; for…in 顺序</a></h2><blockquote>
<p><code>Object.keys</code>在内部会根据属性名<code>key</code>的类型进行不同的排序逻辑。分三种情况：</p>
</blockquote>
<ul>
<li>如果属性名的类型是<code>Number</code>，那么<code>Object.keys</code>返回值是按照<code>key</code>从小到大排序 <strong>‘1’也算是number</strong></li>
<li>如果属性名的类型是<code>String</code>，那么<code>Object.keys</code>返回值是按照属性被创建的时间升序排序。</li>
<li>如果属性名的类型是<code>Symbol</code>，那么逻辑同<code>String</code>相同</li>
</ul>
<h2 id="解构赋值"><a href="#解构赋值" class="headerlink" title="解构赋值"></a>解构赋值</h2><blockquote>
<p>可以取代 delete xxx</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">const</span> &#123; name,...rest &#125; = &#123; <span class="attr">name</span>:<span class="string">&#x27;z&#x27;</span>, <span class="attr">age</span>:<span class="number">10</span>, <span class="attr">sex</span>:<span class="string">&#x27;female&#x27;</span> &#125;</span><br><span class="line"><span class="comment">// name = &#x27;z&#x27; , rest = &#123; age:10, sex:&#x27;female&#x27; &#125;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> [ item,...rest ] = [ &#123; <span class="attr">first</span>:<span class="string">&#x27;a&#x27;</span> &#125;, <span class="number">23</span>, <span class="number">55</span> ]</span><br><span class="line"><span class="comment">// item = &#123; first:&#x27;a&#x27; &#125; , rest = [ 23, 55 ]</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="json简写"><a href="#json简写" class="headerlink" title="json简写"></a>json简写</h2><blockquote>
<p><code>key</code>和<code>value</code>名字一样的时候可以省略<code>value</code></p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">let</span> name = <span class="string">&#x27;zz&#x27;</span></span><br><span class="line"><span class="keyword">let</span> age = <span class="number">10</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> json = &#123; name, age, say()&#123; <span class="built_in">console</span>.log(<span class="string">&#x27;&#x27;</span>) &#125; &#125;</span><br><span class="line"><span class="comment">// =&gt; let json = &#123; name:name, age:age, say:function()&#123; console.log(&#x27;&#x27;) &#125;  &#125;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>


<h2 id="JavaScript浮点数运算精度问题"><a href="#JavaScript浮点数运算精度问题" class="headerlink" title="JavaScript浮点数运算精度问题"></a>JavaScript浮点数运算精度问题</h2><h3 id="描述"><a href="#描述" class="headerlink" title="描述"></a>描述</h3><blockquote>
<p>一开始看到百度的部分解决方案是通过扩大N倍换为整数，但是亲测有问题。直接乘10的N次方部分数据还是会出现精度问题。</p>
</blockquote>
<h3 id="解决"><a href="#解决" class="headerlink" title="解决"></a>解决</h3><blockquote>
</blockquote>
<ol>
<li>我是通过先转换成字符串、然后去掉小数点转为整数  </li>
<li>两个数之间小数点位数进行比较、少的在乘10的n-m次方，运算后在除以10的Math.max(n,m)</li>
</ol>
<p><del>目前没发现bug、不确定是正确的方法</del></p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 浮点数运算</span></span><br><span class="line"><span class="comment"> * type: 1 加法,2 减法</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">floatAddOrMinus</span>(<span class="params"><span class="keyword">type</span>: <span class="built_in">number</span>, arg1: <span class="built_in">string</span>, arg2: <span class="built_in">string</span></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> len1 = <span class="number">0</span></span><br><span class="line">    <span class="keyword">let</span> len2 = <span class="number">0</span></span><br><span class="line">    <span class="keyword">let</span> m = <span class="number">0</span></span><br><span class="line">    <span class="keyword">let</span> item1 = <span class="number">0</span></span><br><span class="line">    <span class="keyword">let</span> item2 = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">        len1 = arg1.split(<span class="string">&quot;.&quot;</span>)[<span class="number">1</span>].length;</span><br><span class="line">    &#125; <span class="keyword">catch</span> (e) &#123;</span><br><span class="line">        len1 = <span class="number">0</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">        len2 = arg2.split(<span class="string">&quot;.&quot;</span>)[<span class="number">1</span>].length;</span><br><span class="line">    &#125; <span class="keyword">catch</span> (e) &#123;</span><br><span class="line">        len2 = <span class="number">0</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (len1 &gt; len2) &#123;</span><br><span class="line">        m = len1;</span><br><span class="line">        item1 = <span class="number">0</span>;</span><br><span class="line">        item2 = len1 - len2;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        m = len2;</span><br><span class="line">        item1 = len2 - len1;</span><br><span class="line">        item2 = <span class="number">0</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">type</span> === <span class="number">1</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> (</span><br><span class="line">            (<span class="built_in">Number</span>(arg1.replace(<span class="string">&quot;.&quot;</span>, <span class="string">&quot;&quot;</span>)) * <span class="number">10</span> ** item1 +</span><br><span class="line">                <span class="built_in">Number</span>(arg2.replace(<span class="string">&quot;.&quot;</span>, <span class="string">&quot;&quot;</span>)) * <span class="number">10</span> ** item2) /</span><br><span class="line">            <span class="number">10</span> ** m</span><br><span class="line">        );</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> (</span><br><span class="line">            (<span class="built_in">Number</span>(arg1.replace(<span class="string">&quot;.&quot;</span>, <span class="string">&quot;&quot;</span>)) * <span class="number">10</span> ** item1 -</span><br><span class="line">                <span class="built_in">Number</span>(arg2.replace(<span class="string">&quot;.&quot;</span>, <span class="string">&quot;&quot;</span>)) * <span class="number">10</span> ** item2) /</span><br><span class="line">            <span class="number">10</span> ** m</span><br><span class="line">        );</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="vue3中ref和其他属性绑定值重名导致绑定失效"><a href="#vue3中ref和其他属性绑定值重名导致绑定失效" class="headerlink" title="vue3中ref和其他属性绑定值重名导致绑定失效"></a>vue3中ref和其他属性绑定值重名导致绑定失效</h2><blockquote>
<p>群友遇到的问题、我一开始看着也没觉得哪里不对。感觉以后能用的上，先存着 。</p>
</blockquote>
<h3 id="描述-1"><a href="#描述-1" class="headerlink" title="描述"></a>描述</h3><blockquote>
<p>使用<code>element-plus</code> 中的 <code>el-form</code> 的时候，model绑定了<code>formData</code>,但是在页面上对表单进行操作的时候，数据绑定无效。</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">el-form</span> </span></span><br><span class="line"><span class="tag"> <span class="attr">ref</span>=<span class="string">&quot;formData&quot;</span> </span></span><br><span class="line"><span class="tag"> <span class="attr">:model</span>=<span class="string">&quot;formData&quot;</span> </span></span><br><span class="line"><span class="tag"> <span class="attr">:rules</span>=<span class="string">&quot;rule&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">el-row</span> <span class="attr">justify</span>=<span class="string">&quot;center&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">el-col</span> <span class="attr">:span</span>=<span class="string">&quot;12&quot;</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">el-form-item</span> <span class="attr">label</span>=<span class="string">&quot;入库类型&quot;</span> <span class="attr">prop</span>=<span class="string">&quot;inOutType&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">el-select</span> <span class="attr">v-model</span>=<span class="string">&quot;formData.inOutType&quot;</span> <span class="attr">clearable</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">el-option</span> <span class="attr">label</span>=<span class="string">&quot;外购&quot;</span> <span class="attr">value</span>=<span class="string">&quot;外购&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">el-option</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">el-option</span> <span class="attr">label</span>=<span class="string">&quot;其他&quot;</span> <span class="attr">value</span>=<span class="string">&quot;其他&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">el-option</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">el-select</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;/<span class="name">el-form-item</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">el-col</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">el-row</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">el-form</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ...</span></span><br><span class="line">setup()&#123;</span><br><span class="line">    <span class="keyword">let</span> formData: IEmptyObject = reactive(&#123;</span><br><span class="line">      warningUseTime: <span class="number">0</span>,</span><br><span class="line">      typeName: <span class="string">&#x27;&#x27;</span>,</span><br><span class="line">      categoryCode: <span class="string">&#x27;&#x27;</span>,</span><br><span class="line">      categoryName: <span class="string">&#x27;&#x27;</span>,</span><br><span class="line">      maintenanceCode: <span class="string">&#x27;&#x27;</span>,</span><br><span class="line">      maintenanceName: <span class="string">&#x27;&#x27;</span>,</span><br><span class="line">      model: <span class="string">&#x27;&#x27;</span>,</span><br><span class="line">      attribute: <span class="string">&#x27;&#x27;</span>,</span><br><span class="line">      unit: <span class="string">&#x27;&#x27;</span>,</span><br><span class="line">      warningProductionQuantity: <span class="number">0</span></span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> &#123; formData &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// ...</span></span><br></pre></td></tr></table></figure>

<h3 id="错误原因"><a href="#错误原因" class="headerlink" title="错误原因"></a>错误原因</h3><blockquote>
<p><code>ref</code>绑定的内容和<code>model</code>绑定的内容重复了，vue3中<code>ref</code>绑定的内容也是通过在<code>setup</code>中定义变量进行获取。具体原因还没仔细看，估计是ref的优先级更高？</p>
</blockquote>
<h2 id="proxy多个路由代理"><a href="#proxy多个路由代理" class="headerlink" title="proxy多个路由代理"></a>proxy多个路由代理</h2><blockquote>
<p><span style='color:red'>重写失效、请求路径包含某个 代理名 代理失效。</span></p>
</blockquote>
<p>记下 还没解决</p>
<h2 id="哈希路由引起样式问题"><a href="#哈希路由引起样式问题" class="headerlink" title="哈希路由引起样式问题"></a>哈希路由引起样式问题</h2><blockquote>
<p>在一个页面引入了样式，并且添加了 <code>scoped</code> ,但是在进行页面跳转的时候，这些引入的样式会影响另一页面。刷新之后就好了</p>
</blockquote>
<p>初步猜测是因为路由用的<code>哈希模式</code>的原因</p>
<blockquote>
<p><code>hash</code> 值变化不会导致浏览器向服务器发出请求</p>
</blockquote>
<p>所以在第一个页面加载的样式，在跳转之后没有刷新，样式就一直会存在，因此影响到了页面的样式</p>
<h3 id="解决方法"><a href="#解决方法" class="headerlink" title="解决方法"></a>解决方法</h3><ul>
<li><code>emit</code>父子组件通讯，点击事件触发后、强制刷新</li>
<li>监听<code>hash</code>值的变化、变化之后、强制刷新</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">setup: <span class="function">() =&gt;</span> &#123;</span><br><span class="line">   <span class="keyword">const</span> route = useRoute();</span><br><span class="line">   watch(</span><br><span class="line">     () =&gt; route.path,</span><br><span class="line">     (to, <span class="keyword">from</span>) =&gt; &#123;</span><br><span class="line">       <span class="keyword">if</span> (<span class="keyword">from</span>.includes(<span class="string">&quot;papercss&quot;</span>) &amp;&amp; <span class="keyword">from</span> !== to) &#123;</span><br><span class="line">         location.reload();</span><br><span class="line">       &#125;</span><br><span class="line">     &#125;</span><br><span class="line">   );</span><br><span class="line"> &#125;</span><br><span class="line"> </span><br></pre></td></tr></table></figure>

<h2 id="el-date-picker限制时间选择范围"><a href="#el-date-picker限制时间选择范围" class="headerlink" title="el-date-picker限制时间选择范围"></a>el-date-picker限制时间选择范围</h2><blockquote>
<p>两个时间选择器、开始时间与结束时间的时间选择范围为<code>24h</code>，并且精确到<code>分</code> (<code>format=&quot;yyyy-MM-dd HH:mm&quot;</code>)</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 基本使用 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">el-form-item</span> <span class="attr">prop</span>=<span class="string">&quot;beginDateStr&quot;</span> <span class="attr">label</span>=<span class="string">&quot;开始时间&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">el-date-picker</span></span></span><br><span class="line"><span class="tag">    <span class="attr">v-model</span>=<span class="string">&quot;formData.beginDateStr&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">type</span>=<span class="string">&quot;datetime&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">placeholder</span>=<span class="string">&quot;选择日期时间&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">format</span>=<span class="string">&quot;yyyy-MM-dd HH:mm&quot;</span></span></span><br><span class="line"><span class="tag">  &gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">el-date-picker</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">el-form-item</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">el-form-item</span> <span class="attr">prop</span>=<span class="string">&quot;endDateStr&quot;</span> <span class="attr">label</span>=<span class="string">&quot;结束时间&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">el-date-picker</span></span></span><br><span class="line"><span class="tag">    <span class="attr">v-model</span>=<span class="string">&quot;formData.endDateStr&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">type</span>=<span class="string">&quot;datetime&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">format</span>=<span class="string">&quot;yyyy-MM-dd HH:mm&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">placeholder</span>=<span class="string">&quot;选择日期时间&quot;</span></span></span><br><span class="line"><span class="tag">  &gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">el-date-picker</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">el-form-item</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="Picker-Options-配置"><a href="#Picker-Options-配置" class="headerlink" title="Picker Options 配置"></a>Picker Options 配置</h3><h4 id="开始时间限制"><a href="#开始时间限制" class="headerlink" title="开始时间限制"></a>开始时间限制</h4><blockquote>
<p>首先对开始时间进行限制 限制在当前日期之前；并且当开始日期改变的时候，结束日期清空</p>
</blockquote>
<p><a target="_blank" rel="noopener" href="https://element.eleme.cn/#/zh-CN/component/datetime-picker">disabledDate 日期禁用范围</a></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">el-date-picker</span></span></span><br><span class="line"><span class="tag">  <span class="attr">v-model</span>=<span class="string">&quot;formData.beginDateStr&quot;</span></span></span><br><span class="line"><span class="tag">  <span class="attr">type</span>=<span class="string">&quot;datetime&quot;</span></span></span><br><span class="line"><span class="tag">  <span class="attr">placeholder</span>=<span class="string">&quot;选择日期时间&quot;</span></span></span><br><span class="line"><span class="tag">  <span class="attr">format</span>=<span class="string">&quot;yyyy-MM-dd HH:mm&quot;</span></span></span><br><span class="line"><span class="tag">  <span class="attr">:picker-options</span>=<span class="string">&quot;pickerOptionsStart&quot;</span></span></span><br><span class="line"><span class="tag">  @<span class="attr">change</span>=<span class="string">&quot;handleChangeStart&quot;</span></span></span><br><span class="line"><span class="tag">&gt;</span><span class="tag">&lt;/<span class="name">el-date-picker</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">private</span> pickerOptionsStart = &#123;</span><br><span class="line">    disabledDate: <span class="function">(<span class="params">time: <span class="built_in">Date</span></span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> time.getTime() &gt; <span class="built_in">Date</span>.now();</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">private</span> handleChangeStart() &#123;</span><br><span class="line">    <span class="built_in">this</span>.formData.endDateStr = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="结束时间限制"><a href="#结束时间限制" class="headerlink" title="结束时间限制"></a>结束时间限制</h4><blockquote>
<p>因为是24h限制、所以 开始时间+24h 和 开始时间-24h 的时间都得禁用；精确到分钟，小时和分钟也得进行限制</p>
</blockquote>
<p><a target="_blank" rel="noopener" href="https://element.eleme.cn/#/zh-CN/component/time-picker">selectableRange 时间选择范围</a><br>这个属性没有在<code>el-date-picker</code>里面，在<code>el-time-picker</code>里面，个人觉得文档写的不是很人性…<br>因为跨天的话、时间范围是不一样的 比如开始时间是<code>2021-05-31 02:00</code><br>那么结束时间的范围是<code>2021-05-31 02:00 - 2021-06-01 02:00</code><br>如果选的是31号 则 <code>selectableRange = &#39;02:00-23:59&#39;</code><br>如果选的是1号 则 <code>selectableRange = &#39;00:00-02:00&#39;</code><br>所以还得对日期选择进行监听，本来是想通过点击/change事件进行监听的<br>但是无效，然后通过监听<code>input</code>框内数据的变化 来进行监听</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">el-date-picker</span></span></span><br><span class="line"><span class="tag">  <span class="attr">v-model</span>=<span class="string">&quot;formData.endDateStr&quot;</span></span></span><br><span class="line"><span class="tag">  <span class="attr">type</span>=<span class="string">&quot;datetime&quot;</span></span></span><br><span class="line"><span class="tag">  <span class="attr">format</span>=<span class="string">&quot;yyyy-MM-dd HH:mm&quot;</span></span></span><br><span class="line"><span class="tag">  <span class="attr">placeholder</span>=<span class="string">&quot;选择日期时间&quot;</span></span></span><br><span class="line"><span class="tag">  @<span class="attr">input</span>=<span class="string">&quot;handleChangeInputDate($event)&quot;</span></span></span><br><span class="line"><span class="tag">  <span class="attr">:picker-options</span>=<span class="string">&quot;&#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">   disabledDate: (time) =&gt; hanldeDisabledDate(time),</span></span></span><br><span class="line"><span class="tag"><span class="string">    selectableRange: dafaulttime,</span></span></span><br><span class="line"><span class="tag"><span class="string">  &#125;&quot;</span></span></span><br><span class="line"><span class="tag">&gt;</span><span class="tag">&lt;/<span class="name">el-date-picker</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">private</span> dafaulttime: <span class="built_in">string</span> = <span class="string">&#x27;00:00:00-23:59:59&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">private</span> handleChangeInputDate(e: <span class="built_in">Date</span>) &#123;</span><br><span class="line">    <span class="comment">// 区别 同一天和下一天的时间限制</span></span><br><span class="line">    <span class="keyword">if</span> (<span class="built_in">this</span>.formData.beginDateStr) &#123;</span><br><span class="line">      <span class="keyword">const</span> begin = <span class="keyword">new</span> EasyDate(<span class="built_in">this</span>.formData.beginDateStr).format(<span class="string">&#x27;dd&#x27;</span>);</span><br><span class="line">      <span class="keyword">const</span> end = <span class="keyword">new</span> EasyDate(e).format(<span class="string">&#x27;dd&#x27;</span>);</span><br><span class="line">      <span class="keyword">if</span> (begin === end) &#123;</span><br><span class="line">        <span class="built_in">this</span>.dafaulttime =</span><br><span class="line">          <span class="keyword">new</span> EasyDate(<span class="built_in">this</span>.formData.beginDateStr).format(<span class="string">&#x27;HH:mm:ss&#x27;</span>) +</span><br><span class="line">          <span class="string">&#x27;-23:59:59&#x27;</span>;</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="built_in">this</span>.dafaulttime =</span><br><span class="line">          <span class="string">&#x27;00:00:00-&#x27;</span> +</span><br><span class="line">          <span class="keyword">new</span> EasyDate(<span class="built_in">this</span>.formData.beginDateStr).format(<span class="string">&#x27;HH:mm:ss&#x27;</span>);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">private</span> hanldeDisabledDate(time: <span class="built_in">Date</span>) &#123;</span><br><span class="line">    <span class="comment">// 24 * 3600 * 1000 == 8.64e7</span></span><br><span class="line">    <span class="keyword">if</span> (<span class="built_in">this</span>.formData.beginDateStr) &#123;</span><br><span class="line">      <span class="keyword">const</span> pickerMinDate = <span class="keyword">new</span> <span class="built_in">Date</span>(<span class="built_in">this</span>.formData.beginDateStr).getTime();</span><br><span class="line">      <span class="keyword">const</span> maxTime = pickerMinDate + <span class="number">8.64e7</span>;</span><br><span class="line">      <span class="keyword">const</span> minTime = pickerMinDate - <span class="number">8.64e7</span>;</span><br><span class="line">      <span class="keyword">return</span> time.getTime() &gt;= maxTime || time.getTime() &lt;= minTime;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> time.getTime() &gt; <span class="built_in">Date</span>.now();</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<h4 id="针对daterange和datetimerange类型进行时间限制"><a href="#针对daterange和datetimerange类型进行时间限制" class="headerlink" title="针对daterange和datetimerange类型进行时间限制"></a>针对<code>daterange</code>和<code>datetimerange</code>类型进行时间限制</h4><blockquote>
<p>不仅仅需要配置<code>disabledDate</code>，还需要配置<code>onPick</code>获取当前点击的日期<br>onPick  Function({ maxDate, minDate }) 选中日期执行的回调，只选择一个的时候返回的minDate</p>
</blockquote>
<p>实例：只能选择31天的范围</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">span</span>&gt;</span>起止时间：<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">el-date-picker</span></span></span><br><span class="line"><span class="tag">          <span class="attr">style</span>=<span class="string">&quot;width: 240px; margin-right: 10px&quot;</span></span></span><br><span class="line"><span class="tag">          <span class="attr">v-model</span>=<span class="string">&quot;dateRange&quot;</span></span></span><br><span class="line"><span class="tag">          <span class="attr">type</span>=<span class="string">&quot;datetimerange&quot;</span></span></span><br><span class="line"><span class="tag">          <span class="attr">range-separator</span>=<span class="string">&quot;至&quot;</span></span></span><br><span class="line"><span class="tag">          <span class="attr">value-format</span>=<span class="string">&quot;yyyy-MM-dd HH:mm:ss&quot;</span></span></span><br><span class="line"><span class="tag">          <span class="attr">start-placeholder</span>=<span class="string">&quot;开始日期&quot;</span></span></span><br><span class="line"><span class="tag">          <span class="attr">end-placeholder</span>=<span class="string">&quot;结束日期&quot;</span></span></span><br><span class="line"><span class="tag">          @<span class="attr">change</span>=<span class="string">&quot;dateChange&quot;</span></span></span><br><span class="line"><span class="tag">          <span class="attr">:picker-options</span>=<span class="string">&quot;&#123;</span></span></span><br><span class="line"><span class="tag"><span class="string">            disabledDate: (time) =&gt; hanldeDisabledDate(time),</span></span></span><br><span class="line"><span class="tag"><span class="string">            onPick: (time) =&gt; hanldeOnPick(time),</span></span></span><br><span class="line"><span class="tag"><span class="string">          &#125;&quot;</span></span></span><br><span class="line"><span class="tag">          <span class="attr">:clearable</span>=<span class="string">&quot;false&quot;</span></span></span><br><span class="line"><span class="tag">        &gt;</span><span class="tag">&lt;/<span class="name">el-date-picker</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">private</span> hanldeOnPick(e: IEmptyObject) &#123;</span><br><span class="line">  <span class="keyword">if</span> (!e.maxDate) &#123;</span><br><span class="line">    <span class="keyword">const</span> timeRange = <span class="number">8.64e7</span> * <span class="number">31</span>;</span><br><span class="line">    <span class="built_in">this</span>.pickDateRange.maxTime = e.minDate.getTime() + timeRange;</span><br><span class="line">    <span class="built_in">this</span>.pickDateRange.minTime = e.minDate.getTime() - timeRange;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="built_in">this</span>.pickDateRange.minTime = <span class="literal">null</span>;</span><br><span class="line">    <span class="built_in">this</span>.pickDateRange.maxTime = <span class="literal">null</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">private</span> hanldeDisabledDate(e: <span class="built_in">Date</span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> pickerDate = e.getTime();</span><br><span class="line">  <span class="keyword">if</span> (<span class="built_in">this</span>.pickDateRange.minTime &amp;&amp; <span class="built_in">this</span>.pickDateRange.maxTime) &#123;</span><br><span class="line">    <span class="keyword">return</span> (</span><br><span class="line">      e.getTime() &lt;= <span class="built_in">this</span>.pickDateRange.minTime ||</span><br><span class="line">      e.getTime() &gt;= <span class="built_in">Date</span>.now() ||</span><br><span class="line">      e.getTime() &gt;= <span class="built_in">this</span>.pickDateRange.maxTime</span><br><span class="line">    );</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> e.getTime() &gt;= <span class="built_in">Date</span>.now();</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="主要问题"><a href="#主要问题" class="headerlink" title="主要问题"></a>主要问题</h3><blockquote>
<p>结束时间的 <code>picker-options</code> 属性,如果直接通过一个对象传递的话 ，会失效..,不清楚原因。我猜测是双向数据绑定相关的东西的问题</p>
</blockquote>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// √ 生效</span></span><br><span class="line">:picker-options=<span class="string">&quot;&#123;</span></span><br><span class="line"><span class="string">   disabledDate: (time) =&gt; hanldeDisabledDate(time),</span></span><br><span class="line"><span class="string">    selectableRange: dafaulttime,</span></span><br><span class="line"><span class="string">  &#125;&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// × 不生效</span></span><br><span class="line">:picker-options=<span class="string">&quot;pickerOption&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">private</span> pickerOption = &#123;</span><br><span class="line">   disabledDate: <span class="function">(<span class="params">time</span>) =&gt;</span> hanldeDisabledDate(time),</span><br><span class="line">    selectableRange: dafaulttime,</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<h2 id="multipart-form-data-文件流请求和参数相关"><a href="#multipart-form-data-文件流请求和参数相关" class="headerlink" title="multipart/form-data 文件流请求和参数相关"></a>multipart/form-data 文件流请求和参数相关</h2><blockquote>
<p>一般的接口请求都是以json的形式进行传输、这次的表单会有文件上传的情况 所以用formdata的形式进行传输。</p>
</blockquote>
<p><code>表单数据存在body内 且content-type需要设置为application/json，文件数据存在file内</code><br><img src="https://i.bmp.ovh/imgs/2022/02/5db690ad15e1531e.png"></p>
<ol>
<li>formData请求，参数必须为<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/API/FormData">FromData</a>类型的</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> params = <span class="keyword">new</span> FormData()</span><br><span class="line"></span><br><span class="line">params.append(<span class="string">&#x27;file&#x27;</span>,value,name)</span><br><span class="line"></span><br><span class="line"><span class="comment">// params.get(&#x27;file&#x27;) 获取file值</span></span><br><span class="line"><span class="comment">// params.set(&#x27;file&#x27;,newValue) 设置file值</span></span><br></pre></td></tr></table></figure>

<ol start="2">
<li>对于不是文本/二进制类型的数据，还需要使用<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/API/Blob">Blob对象</a>进行转换</li>
</ol>
<blockquote>
<p>如上图所示，<code>body</code>内传递的是<code>Object</code>对象，而且，<code>body</code>的<code>content-type</code>需要设置为<code>application/json</code>类型</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> obj = &#123;...&#125;</span><br><span class="line"><span class="keyword">let</span> blob = <span class="keyword">new</span> Blob([<span class="built_in">JSON</span>.stringify(obj)],&#123;<span class="attr">type</span>:<span class="string">&#x27;application/json&#x27;</span>&#125;)</span><br><span class="line"></span><br><span class="line">params.append(<span class="string">&#x27;body&#x27;</span>,blob)</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ol start="3">
<li>axios主要配置</li>
</ol>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// http.ts</span></span><br><span class="line"><span class="keyword">const</span> instance = axios.create(&#123;</span><br><span class="line">  timeout: <span class="number">600000</span>, <span class="comment">// by huangrong</span></span><br><span class="line">  headers: &#123; <span class="string">&#x27;Content-Type&#x27;</span>: <span class="string">&#x27;application/json&#x27;</span> &#125;,</span><br><span class="line">  baseURL: <span class="string">&#x27;/&#x27;</span>,</span><br><span class="line">  <span class="comment">// transformResponse: (data: any) =&gt; &#123;</span></span><br><span class="line">  <span class="comment">//   //</span></span><br><span class="line">  <span class="comment">// &#125;</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">instance.upload = <span class="function">(<span class="params">url, data, config = &#123;&#125;, params</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> formData = <span class="keyword">new</span> FormData();</span><br><span class="line">  data.forEach(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">    formData.append(<span class="string">&#x27;file&#x27;</span>, item.value, item.name || item.filename);</span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="keyword">if</span> (params &amp;&amp; <span class="built_in">Object</span>.keys(params).length &gt; <span class="number">0</span>) &#123;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">const</span> m <span class="keyword">in</span> params) &#123;</span><br><span class="line">      <span class="keyword">if</span> (params.hasOwnProperty(m)) &#123;</span><br><span class="line">        <span class="keyword">const</span> key = m;</span><br><span class="line">        <span class="keyword">const</span> value = params[m];</span><br><span class="line">        formData.append(key, value);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> instance.request(&#123;</span><br><span class="line">    method: <span class="string">&#x27;post&#x27;</span>,</span><br><span class="line">    ...config,</span><br><span class="line">    url,</span><br><span class="line">    data: formData,</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 请求拦截器</span></span><br><span class="line">instance.interceptors.request.use(<span class="function"><span class="params">config</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> &#123; params = &#123;&#125; &#125; = config;</span><br><span class="line">    config.params = &#123; ...params, time: <span class="keyword">new</span> <span class="built_in">Date</span>().getTime() &#125;;</span><br><span class="line">    <span class="comment">// add token if need</span></span><br><span class="line">    config.headers = &#123;</span><br><span class="line">      ...(config.headers || &#123;&#125;),</span><br><span class="line">      <span class="string">&#x27;X-Auth-Token&#x27;</span>: CookieStorage.token,</span><br><span class="line">      <span class="string">&#x27;X-Stargate-AppId&#x27;</span>: <span class="number">25</span>,</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="keyword">return</span> config;</span><br><span class="line">  &#125;, <span class="function"><span class="params">err</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// show err</span></span><br><span class="line">  &#125;</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="comment">// common-api.ts</span></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">uploadFile</span>(<span class="params">path: <span class="built_in">string</span>, file: IUploadParam[], config?: AxiosRequestConfig, params?: IEmptyObject</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> http.upload(path, file, config, params).then(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Promise</span>.resolve(res.data);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// index.vue</span></span><br><span class="line"> uploadFile(</span><br><span class="line">        <span class="built_in">this</span>.path,</span><br><span class="line">        (<span class="built_in">this</span>.$refs.imageUpload <span class="keyword">as</span> <span class="built_in">any</span>).fileList,</span><br><span class="line">        &#123;&#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          body: <span class="keyword">new</span> Blob(</span><br><span class="line">            [</span><br><span class="line">              <span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">                ...this.formData,</span><br><span class="line">                factory: <span class="built_in">this</span>.factory,</span><br><span class="line">                workshop: <span class="built_in">this</span>.workshop,</span><br><span class="line">              &#125;),</span><br><span class="line">            ],</span><br><span class="line">            &#123; <span class="keyword">type</span>: <span class="string">&#x27;application/json&#x27;</span> &#125;</span><br><span class="line">          ),</span><br><span class="line">        &#125;</span><br><span class="line">      )</span><br></pre></td></tr></table></figure>

<h2 id="axios实现文件导出功能，无法获取response的异常信息"><a href="#axios实现文件导出功能，无法获取response的异常信息" class="headerlink" title="axios实现文件导出功能，无法获取response的异常信息"></a>axios实现文件导出功能，无法获取response的异常信息</h2><p><img src="https://i.bmp.ovh/imgs/2022/02/d7a045921c6cb54e.png"></p>
<p>如图所示: 上方是调文件导出接口，返回的异常信息。下方是普通请求获取的异常信息。上方的<code>data</code>内没有<code>errorMsg</code></p>
<h3 id="错误原因-1"><a href="#错误原因-1" class="headerlink" title="错误原因"></a>错误原因</h3><blockquote>
<p>可以看到上方红圈内的<code>data</code>是<code>Blob</code>类型的（文件存储类型），所以不能直接获取，需要<a href="!https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader"><code>FileReader</code></a>对象进行处理，转换获取blob、file文件的数据。</p>
</blockquote>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 响应拦截器</span></span><br><span class="line">instance.interceptors.response.use(<span class="function"><span class="params">response</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Promise</span>.resolve(response);</span><br><span class="line">&#125;, <span class="function"><span class="params">error</span> =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// show error_msg and reject</span></span><br><span class="line">  <span class="comment">// console.log(&#x27;响应失败信息&#x27;, error.response);</span></span><br><span class="line">  <span class="keyword">if</span> (error &amp;&amp; error.response &amp;&amp; error.response.status) &#123;</span><br><span class="line">    <span class="keyword">let</span> errCode = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">let</span> errMsg = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">    <span class="keyword">if</span> (!!error.response.data) &#123;</span><br><span class="line">      <span class="comment">// 文件流错误处理</span></span><br><span class="line">      <span class="keyword">if</span> (error.response.config.responseType === <span class="string">&#x27;blob&#x27;</span>) &#123;</span><br><span class="line">        <span class="keyword">const</span> reader = <span class="keyword">new</span> FileReader();</span><br><span class="line">        reader.readAsText(error.response.data);</span><br><span class="line">        reader.onload = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">          <span class="keyword">try</span> &#123;</span><br><span class="line">            <span class="keyword">const</span> &#123; errorMsg &#125; = <span class="built_in">JSON</span>.parse(reader.result <span class="keyword">as</span> <span class="built_in">string</span>);</span><br><span class="line">            errMsg = errorMsg;</span><br><span class="line">            handleError(error.response.status, errMsg);</span><br><span class="line">          &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">&#x27;解析错误&#x27;</span>);</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;;</span><br><span class="line">      &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="comment">// 普通错误处理</span></span><br><span class="line">        <span class="keyword">const</span> &#123; status, errorMsg &#125; = error.response.data;</span><br><span class="line">        errCode = status;</span><br><span class="line">        errMsg = errorMsg;</span><br><span class="line">        handleError(error.response.status, errMsg);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(error);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure> 
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
    </footer>
  </div>

    
 
   
</article>

    
    <article
  id="post-uniapp"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2021/11/15/uniapp/"
    >uni-app</a> 
</h2>
 

    </header>
     
    <div class="article-meta">
      <a href="/2021/11/15/uniapp/" class="article-date">
  <time datetime="2021-11-15T07:16:00.000Z" itemprop="datePublished">2021-11-15</time>
</a> 
  <div class="article-category">
    <a class="article-category-link" href="/categories/uni-app/">uni-app</a>
  </div>
   
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <h2 id="文件目录结构"><a href="#文件目录结构" class="headerlink" title="文件目录结构"></a>文件目录结构</h2><p><img src="https://s3.bmp.ovh/imgs/2021/11/06f4e01c368b5249.png"></p>
<h2 id="生命周期"><a href="#生命周期" class="headerlink" title="生命周期"></a>生命周期</h2><h3 id="应用生命周期-App-vue"><a href="#应用生命周期-App-vue" class="headerlink" title="应用生命周期  - App.vue"></a>应用生命周期  - App.vue</h3><table>
<thead>
<tr>
<th>函数名</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>onLaunch</td>
<td>当<code>uni-app</code> 初始化完成时触发（全局只触发一次）</td>
</tr>
<tr>
<td>onShow</td>
<td>当 <code>uni-app</code> 启动，或从后台进入前台显示</td>
</tr>
<tr>
<td>onHide</td>
<td>当 <code>uni-app</code> 从前台进入后台</td>
</tr>
<tr>
<td>onError</td>
<td>当 <code>uni-app</code> 报错时触发</td>
</tr>
<tr>
<td>onUniNViewMessage</td>
<td>对 <code>nvue</code> 页面发送的数据进行监听，可参考 nvue 向 vue 通讯</td>
</tr>
<tr>
<td>onUnhandledRejection</td>
<td>对未处理的 Promise 拒绝事件监听函数（2.8.1+）</td>
</tr>
<tr>
<td>onPageNotFound</td>
<td>页面不存在监听函数</td>
</tr>
<tr>
<td>onThemeChange</td>
<td>监听系统主题变化</td>
</tr>
</tbody></table>
<h3 id="页面生命周期"><a href="#页面生命周期" class="headerlink" title="页面生命周期"></a>页面生命周期</h3><table>
<thead>
<tr>
<th>函数名</th>
<th>说明</th>
<th>平台差异说明</th>
<th>最低版本</th>
</tr>
</thead>
<tbody><tr>
<td>onInit</td>
<td>监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad</td>
<td>百度小程序</td>
<td>3.1.0+</td>
</tr>
<tr>
<td>onLoad</td>
<td>监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例</td>
<td></td>
<td></td>
</tr>
<tr>
<td>onShow</td>
<td>监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面</td>
<td></td>
<td></td>
</tr>
<tr>
<td>onReady</td>
<td>监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发</td>
<td></td>
<td></td>
</tr>
<tr>
<td>onHide</td>
<td>监听页面隐藏</td>
<td></td>
<td></td>
</tr>
<tr>
<td>onUnload</td>
<td>监听页面卸载</td>
<td></td>
<td></td>
</tr>
<tr>
<td>onResize</td>
<td>监听窗口尺寸变化</td>
<td>App、微信小程序</td>
<td></td>
</tr>
<tr>
<td>onPullDownRefresh</td>
<td>监听用户下拉动作，一般用于下拉刷新</td>
<td></td>
<td></td>
</tr>
<tr>
<td>onReachBottom</td>
<td>页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项</td>
<td></td>
<td></td>
</tr>
<tr>
<td>onTabItemTap</td>
<td>点击 tab 时触发，参数为Object，具体见下方注意事项</td>
<td>微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App</td>
<td></td>
</tr>
<tr>
<td>onShareAppMessage</td>
<td>用户点击右上角分享    微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序</td>
<td></td>
<td></td>
</tr>
<tr>
<td>onPageScroll</td>
<td>监听页面滚动，参数为Object</td>
<td>nvue暂不支持</td>
<td></td>
</tr>
<tr>
<td>onNavigationBarButtonTap</td>
<td>监听原生标题栏按钮点击事件，参数为Object</td>
<td>App、H5</td>
<td></td>
</tr>
<tr>
<td>onBackPress</td>
<td>监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解。支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。</td>
<td>app、H5、支付宝小程序</td>
<td></td>
</tr>
<tr>
<td>onNavigationBarSearchInputChanged</td>
<td>监听原生标题栏搜索输入框输入内容变化事件</td>
<td>App、H5</td>
<td>1.6.0</td>
</tr>
<tr>
<td>onNavigationBarSearchInputConfirmed</td>
<td>监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。</td>
<td>App、H5    1.6.0</td>
<td></td>
</tr>
<tr>
<td>onNavigationBarSearchInputClicked</td>
<td>监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）</td>
<td>App、H5</td>
<td>1.6.0</td>
</tr>
<tr>
<td>onShareTimeline</td>
<td>监听用户点击右上角转发到朋友圈</td>
<td>微信小程序</td>
<td>2.8.1+</td>
</tr>
<tr>
<td>onAddToFavorites</td>
<td>监听用户点击右上角收藏</td>
<td>微信小程序</td>
<td>2.8.1+</td>
</tr>
</tbody></table>
<h2 id="路由"><a href="#路由" class="headerlink" title="路由"></a>路由</h2><blockquote>
<p>跳转方式：<code>navigator</code>组件跳转(<code>声明式</code>)、调用<code>API</code>跳转(<code>编程式</code>)</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">navigator</span> <span class="attr">url</span>=<span class="string">&quot;/pages/404/index&quot;</span>&gt;</span>404<span class="tag">&lt;/<span class="name">navigator</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">uni.navigateTo(&#123; <span class="attr">url</span>: <span class="string">&quot;/pages/index/index&quot;</span> &#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * open-type属性 </span></span><br><span class="line"><span class="comment"> * 值：</span></span><br><span class="line"><span class="comment"> *  navigate - 打卡新页面</span></span><br><span class="line"><span class="comment"> *  redirectTo - 页面重定向</span></span><br><span class="line"><span class="comment"> *  navigateBack - 页面返回</span></span><br><span class="line"><span class="comment"> *  switchTab - tab切换</span></span><br><span class="line"><span class="comment"> *  reLaunch - 重加载</span></span><br><span class="line"><span class="comment"> **/</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>tab切换 - 调用API<code>uni.switchTab</code>、使用组件<code>&lt;navigator open-type=&quot;switchTab&quot;/&gt;</code></p>
</blockquote>
<h3 id="路由传参与接收"><a href="#路由传参与接收" class="headerlink" title="路由传参与接收"></a>路由传参与接收</h3><blockquote>
<p>传参</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">uni.navigateTo(url:<span class="string">&#x27;page?name=doreen&amp;age=18&#x27;</span>)</span><br></pre></td></tr></table></figure>

<blockquote>
<p>接收</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">onLoad:<span class="function"><span class="keyword">function</span>(<span class="params">option</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(option.name,option.age)    </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="页面配置"><a href="#页面配置" class="headerlink" title="页面配置"></a><a target="_blank" rel="noopener" href="https://uniapp.dcloud.io/collocation/pages?id=%E9%85%8D%E7%BD%AE%E9%A1%B9%E5%88%97%E8%A1%A8">页面配置</a></h2><blockquote>
<p>在<code>pages.json</code>内配置页面路由</p>
</blockquote>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&quot;pages&quot;: [ </span><br><span class="line">    <span class="comment">//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages</span></span><br><span class="line">    &#123;</span><br><span class="line">        <span class="attr">&quot;path&quot;</span>: <span class="string">&quot;pages/index/index&quot;</span>,</span><br><span class="line">        <span class="attr">&quot;style&quot;</span>: &#123;</span><br><span class="line">            <span class="attr">&quot;navigationBarTitleText&quot;</span>: <span class="string">&quot;uni-app&quot;</span></span><br><span class="line">            &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">        <span class="attr">&quot;path&quot;</span>: <span class="string">&quot;pages/404/index&quot;</span>,</span><br><span class="line">        <span class="attr">&quot;style&quot;</span>: &#123;</span><br><span class="line">            <span class="attr">&quot;navigationBarTitleText&quot;</span>: <span class="string">&quot;页面不存在&quot;</span>,</span><br><span class="line">            <span class="attr">&quot;enablePullDownRefresh&quot;</span>: <span class="literal">false</span></span><br><span class="line">            &#125;</span><br><span class="line">    &#125;</span><br><span class="line">],</span><br></pre></td></tr></table></figure>

<h4 id="pages配置项"><a href="#pages配置项" class="headerlink" title="pages配置项"></a>pages配置项</h4><table>
<thead>
<tr>
<th>属性</th>
<th>类型</th>
<th>子属性</th>
<th>子类型</th>
<th>默认值</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>path</td>
<td>string</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a target="_blank" rel="noopener" href="https://uniapp.dcloud.io/collocation/pages?id=style">style</a></td>
<td>Object</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>navigationBarBackgroundColor</td>
<td>HexColor</td>
<td>#000000</td>
<td>导航栏背景颜色</td>
</tr>
<tr>
<td></td>
<td></td>
<td>navigationBarTextStyle</td>
<td>String</td>
<td>white</td>
<td>导航栏标题颜色及状态栏前景颜色，仅支持 black/white</td>
</tr>
<tr>
<td></td>
<td></td>
<td>navigationBarTitleText</td>
<td>String</td>
<td></td>
<td>导航栏标题文字内容</td>
</tr>
<tr>
<td></td>
<td></td>
<td>navigationBarBackgroundColor</td>
<td>HexColor</td>
<td>#000000</td>
<td>导航栏背景颜色</td>
</tr>
<tr>
<td></td>
<td></td>
<td>……</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody></table>
<h4 id="tabBar配置项"><a href="#tabBar配置项" class="headerlink" title="tabBar配置项"></a>tabBar配置项</h4><table>
<thead>
<tr>
<th>属性</th>
<th>类型</th>
<th>必填</th>
<th>默认值</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>color</td>
<td>HexColor</td>
<td>是</td>
<td></td>
<td>tab上文字默认颜色</td>
</tr>
<tr>
<td>selectedColor</td>
<td>HexColor</td>
<td>是</td>
<td></td>
<td>tab上文字选中时的默认颜色</td>
</tr>
<tr>
<td>backgroundColor</td>
<td>HexColor</td>
<td>是</td>
<td></td>
<td>tab的背景色</td>
</tr>
<tr>
<td>list</td>
<td>Array</td>
<td>是</td>
<td></td>
<td>tab的列表，2-5个</td>
</tr>
</tbody></table>
<blockquote>
<p>list对象属性如下：</p>
</blockquote>
<table>
<thead>
<tr>
<th>属性</th>
<th>类型</th>
<th>必填</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>pagePath</td>
<td>String</td>
<td>是</td>
<td>页面路径，必须在pages中先定义</td>
</tr>
<tr>
<td>text</td>
<td>String</td>
<td>是</td>
<td>tab上按钮文字</td>
</tr>
<tr>
<td>iconPath</td>
<td>String</td>
<td>否</td>
<td>图片路径</td>
</tr>
<tr>
<td>selectedIconPath</td>
<td>String</td>
<td>否</td>
<td>选中时的图片路径</td>
</tr>
<tr>
<td>visible</td>
<td>Boolean</td>
<td>否</td>
<td>该项是否展示，默认展示</td>
</tr>
</tbody></table>
<p><code>配置了tabBar之后list内的页面不能使用uni.navigateTo进行跳转，需要改成uni.switchTab</code><br><code>对于在list内的页面，使用&lt;navigator url=&#39;&#39;&gt;进行跳转时要加上 open-type=&quot;switchTab&quot; 属性</code></p>
<h4 id="subPackages分包配置"><a href="#subPackages分包配置" class="headerlink" title="subPackages分包配置"></a><a target="_blank" rel="noopener" href="https://uniapp.dcloud.io/collocation/pages?id=subpackages">subPackages分包配置</a></h4><blockquote>
<p>主包: 即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本 <code>(公共资源)</code><br>分包: 则是根据pages.json的配置进行划分。<code>(按需加载的资源)</code>  </p>
</blockquote>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="attr">&quot;pages&quot;</span>: [&#123;</span><br><span class="line">        <span class="attr">&quot;path&quot;</span>: <span class="string">&quot;pages/index/index&quot;</span>,</span><br><span class="line">        &quot;style&quot;: &#123; ... &#125;</span><br><span class="line">    &#125;],</span><br><span class="line">    <span class="comment">// .....</span></span><br><span class="line">    &quot;subPackages&quot;: [&#123;</span><br><span class="line">        &quot;root&quot;: &quot;pagesA&quot;,  // 分包文件夹名称（与pages文件夹同级）</span><br><span class="line">        &quot;pages&quot;: [&#123;</span><br><span class="line">            &quot;path&quot;: &quot;list/list&quot;,  // 路径</span><br><span class="line">            &quot;style&quot;: &#123; ... &#125;</span><br><span class="line">        &#125;]</span><br><span class="line">    &#125;, &#123;</span><br><span class="line">        &quot;root&quot;: &quot;pagesB&quot;,</span><br><span class="line">        &quot;pages&quot;: [&#123;</span><br><span class="line">            &quot;path&quot;: &quot;detail/detail&quot;,</span><br><span class="line">            &quot;style&quot;: &#123; ... &#125;</span><br><span class="line">        &#125;]</span><br><span class="line">    &#125;],</span><br><span class="line">    </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="常用API"><a href="#常用API" class="headerlink" title="常用API"></a><a href="!https://uniapp.dcloud.io/api/README">常用API</a></h2><h2 id="组件通信"><a href="#组件通信" class="headerlink" title="组件通信"></a>组件通信</h2><h3 id="父子组件通信"><a href="#父子组件通信" class="headerlink" title="父子组件通信"></a>父子组件通信</h3><blockquote>
<p>和Vue一样</p>
<ol>
<li>父组件通过绑定属性将数据传递给子组件，子组件通过props进行接收</li>
<li>子组件通过<code>$emit</code>进行广播，父组件通过@xx进行接收</li>
</ol>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!--  child.vue --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">view</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">text</span>&gt;</span>子组件<span class="tag">&lt;/<span class="name">text</span>&gt;</span></span><br><span class="line">        &#123;&#123;msg&#125;&#125;</span><br><span class="line">        <span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">&quot;default&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;getChild&quot;</span>&gt;</span>子传父<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">    props:[<span class="string">&#x27;msg&#x27;</span>],  <span class="comment">// 接收父组件传递的数据，只读</span></span></span><br><span class="line">    methods: &#123;</span><br><span class="line">        getChild()&#123;</span><br><span class="line"><span class="javascript">            <span class="built_in">this</span>.$emit(<span class="string">&#x27;getChild&#x27;</span>,<span class="string">&#x27;aaaa&#x27;</span>) <span class="comment">// 传递给父组件的数据</span></span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!--  parent.vue --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">view</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- 传递&amp;获取数据 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">child</span> <span class="attr">:msg</span>=<span class="string">&#x27;title&#x27;</span> @<span class="attr">getChild</span>=<span class="string">&#x27;say&#x27;</span>&gt;</span><span class="tag">&lt;/<span class="name">child</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> Child <span class="keyword">from</span> <span class="string">&#x27;@/componets/child.vue&#x27;</span>  <span class="comment">// 引入子组件</span></span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line">    data() &#123;</span><br><span class="line"><span class="javascript">        <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">            title: <span class="string">&quot;Hello&quot;</span>,</span></span><br><span class="line">        &#125;;</span><br><span class="line">    &#125;,</span><br><span class="line">    components:&#123;</span><br><span class="line"><span class="javascript">        Child  <span class="comment">// 声明</span></span></span><br><span class="line">    &#125;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">        say(info)&#123;</span><br><span class="line"><span class="javascript">            <span class="built_in">this</span>.title = info <span class="comment">// 获取子组件的数据</span></span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="全局通信"><a href="#全局通信" class="headerlink" title="全局通信"></a>全局通信</h3><blockquote>
<p>uniapp提供了 <code>uni.$emit</code> 和 <code>uni.$on</code> 两个api进行全局的通信 (和vue兄弟组件通信的方式差不多,这里不限于兄弟组件)</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- pages1 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">view</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">text</span>&gt;</span>&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="name">text</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line">  data() &#123;</span><br><span class="line"><span class="javascript">      <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">          name:<span class="string">&#x27;me&#x27;</span></span></span><br><span class="line">        &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  onLoad() &#123;</span><br><span class="line"><span class="javascript">    <span class="comment">//   发布广播</span></span></span><br><span class="line"><span class="javascript">      uni.$on(<span class="string">&#x27;getMeFun&#x27;</span>,<span class="function">(<span class="params">str</span>)=&gt;</span>&#123;</span></span><br><span class="line"><span class="javascript">          <span class="built_in">this</span>.name = str</span></span><br><span class="line"><span class="javascript">          <span class="built_in">console</span>.log(<span class="string">&#x27;me 页面的全局事件被触发&#x27;</span>)</span></span><br><span class="line">        &#125;)</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- pages2 --&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 点击事件触发后打印文字、并将pages1的数据修改为 a-me --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">view</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">&quot;default&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;hanldeClick&quot;</span>&gt;</span>点击<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">view</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line">    methods: &#123;</span><br><span class="line">        hanldeClick()&#123;</span><br><span class="line"><span class="javascript">            uni.$emit(<span class="string">&#x27;getMeFun&#x27;</span>,<span class="string">&#x27;a-me&#x27;</span>)</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="Vuex"><a href="#Vuex" class="headerlink" title="Vuex"></a><a href="!https://uniapp.dcloud.io/vue-vuex?id=%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86vuex">Vuex</a></h3> 
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
    </footer>
  </div>

    
 
   
</article>

    
    <article
  id="post-axios封装&amp;proxyTable代理配置"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2021/09/10/axios%E5%B0%81%E8%A3%85&proxyTable%E4%BB%A3%E7%90%86%E9%85%8D%E7%BD%AE/"
    >axios封装&amp;proxyTable代理配置</a> 
</h2>
 

    </header>
     
    <div class="article-meta">
      <a href="/2021/09/10/axios%E5%B0%81%E8%A3%85&proxyTable%E4%BB%A3%E7%90%86%E9%85%8D%E7%BD%AE/" class="article-date">
  <time datetime="2021-09-10T02:21:42.000Z" itemprop="datePublished">2021-09-10</time>
</a> 
  <div class="article-category">
    <a class="article-category-link" href="/categories/vue/">vue</a>
  </div>
   
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <h3 style='color:red'>只在开发环境有效、打包之后代理配置就不生效了</h3>

<h2 id="vite-config-ts-内进行代理配置"><a href="#vite-config-ts-内进行代理配置" class="headerlink" title="vite.config.ts 内进行代理配置"></a>vite.config.ts 内进行代理配置</h2><blockquote>
<p>多代理配置</p>
</blockquote>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line">server: &#123;</span><br><span class="line">    open: <span class="literal">true</span>,</span><br><span class="line">    proxy: &#123;</span><br><span class="line">      <span class="string">&#x27;/api&#x27;</span>: &#123;</span><br><span class="line">        target: <span class="string">&#x27;http://rap2api.taobao.org/app/mock/data&#x27;</span>,</span><br><span class="line">        changeOrigin: <span class="literal">true</span>,</span><br><span class="line">        rewrite: <span class="function">(<span class="params">path</span>) =&gt;</span> path.replace(<span class="regexp">/^\/api/</span>, <span class="string">&#x27;&#x27;</span>)</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="string">&#x27;/music-api&#x27;</span>: &#123;</span><br><span class="line">        target: <span class="string">&#x27;https://api.uomg.com/api/rand.music?format=json&amp;sort=%E7%83%AD%E6%AD%8C%E6%A6%9C&#x27;</span>,</span><br><span class="line">        changeOrigin: <span class="literal">true</span>,</span><br><span class="line">        rewrite: <span class="function">(<span class="params">path</span>) =&gt;</span> path.replace(<span class="regexp">/^\/music-api/</span>, <span class="string">&#x27;&#x27;</span>)</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="string">&#x27;/music-lyric&#x27;</span>: &#123;</span><br><span class="line">        <span class="comment">// target:&#x27;https://api.imjad.cn/cloudmusic/?type=lyric&amp;id=1479526505&#x27;</span></span><br><span class="line">        target: <span class="string">&#x27;https://api.imjad.cn/cloudmusic/&#x27;</span>,</span><br><span class="line">        changeOrigin: <span class="literal">true</span>,</span><br><span class="line">        rewrite: <span class="function">(<span class="params">path</span>) =&gt;</span> path.replace(<span class="regexp">/^\/music-lyric/</span>, <span class="string">&#x27;&#x27;</span>)</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="string">&#x27;/one-api&#x27;</span>: &#123;</span><br><span class="line">        target: <span class="string">&#x27;https://api.tianapi.com/txapi/one/index?key=7764228bedff0b2310879d47173c4603&amp;rand=1&#x27;</span>,</span><br><span class="line">        changeOrigin: <span class="literal">true</span>,</span><br><span class="line">        rewrite: <span class="function">(<span class="params">path</span>) =&gt;</span> path.replace(<span class="regexp">/^\/one-api/</span>, <span class="string">&#x27;&#x27;</span>)</span><br><span class="line">      &#125;,</span><br><span class="line">      <span class="string">&#x27;/diary-api&#x27;</span>: &#123;</span><br><span class="line">        target: <span class="string">&#x27;http://api.tianapi.com/txapi/tiangou/index?key=7764228bedff0b2310879d47173c4603&#x27;</span>,</span><br><span class="line">        changeOrigin: <span class="literal">true</span>,</span><br><span class="line">        rewrite: <span class="function">(<span class="params">path</span>) =&gt;</span> path.replace(<span class="regexp">/^\/diary-api/</span>, <span class="string">&#x27;&#x27;</span>)</span><br><span class="line">      &#125;,</span><br><span class="line"></span><br><span class="line">    &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="新建一个http-ts文件对axios封装"><a href="#新建一个http-ts文件对axios封装" class="headerlink" title="新建一个http.ts文件对axios封装"></a>新建一个http.ts文件对axios封装</h2><blockquote>
<p>最基础的配置只需要实例化<code>axios</code>对象,配置<code>baseUrl</code>就行了</p>
</blockquote>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; CookieStorage &#125; <span class="keyword">from</span> <span class="string">&#x27;@/utils/cookies&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> axios, &#123; AxiosRequestConfig &#125; <span class="keyword">from</span> <span class="string">&#x27;axios&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> qs <span class="keyword">from</span> <span class="string">&#x27;qs&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> instance = axios.create(&#123;</span><br><span class="line">  timeout: <span class="number">600000</span>,</span><br><span class="line">  headers: &#123; <span class="string">&#x27;Content-Type&#x27;</span>: <span class="string">&#x27;application/json&#x27;</span> &#125;,</span><br><span class="line">  baseURL: <span class="string">&#x27;/&#x27;</span>,</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 保存下载文件</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">saveFile</span>(<span class="params">binaryData: <span class="built_in">string</span>, fileName: <span class="built_in">string</span>, mime?: <span class="built_in">string</span></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">const</span> fileDownload = <span class="built_in">require</span>(<span class="string">&#x27;js-file-download&#x27;</span>);</span><br><span class="line">  fileDownload(binaryData, fileName, mime);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">instance.download = &#123;</span><br><span class="line">  get(url, config) &#123;</span><br><span class="line">    <span class="keyword">const</span> &#123; filename = <span class="string">&#x27;temp&#x27;</span>, mime = <span class="string">&#x27;&#x27;</span> &#125; = config || &#123;&#125;;</span><br><span class="line">    <span class="keyword">return</span> instance.get(url, &#123; ...config, responseType: <span class="string">&#x27;blob&#x27;</span> &#125;).then(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">      saveFile(res.data, filename, mime);</span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">Promise</span>.resolve(res);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;,</span><br><span class="line">  post: <span class="function">(<span class="params">url, data, config</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> &#123; filename = <span class="string">&#x27;temp&#x27;</span>, mime = <span class="string">&#x27;&#x27;</span> &#125; = config || &#123;&#125;;</span><br><span class="line">    <span class="keyword">return</span> instance.post(url, data, &#123; ...config, responseType: <span class="string">&#x27;blob&#x27;</span> &#125;).then(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">      saveFile(res.data, filename, mime);</span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">Promise</span>.resolve(res);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// ne-upload</span></span><br><span class="line">instance.upload = <span class="function">(<span class="params">url, data, config = &#123;&#125;, params</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> formData = <span class="keyword">new</span> FormData();</span><br><span class="line">  data.forEach(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">    formData.append(<span class="string">&#x27;file&#x27;</span>, item.value, item.name || item.filename);</span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="keyword">if</span> (params &amp;&amp; <span class="built_in">Object</span>.keys(params).length &gt; <span class="number">0</span>) &#123;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">const</span> m <span class="keyword">in</span> params) &#123;</span><br><span class="line">      <span class="keyword">if</span> (params.hasOwnProperty(m)) &#123;</span><br><span class="line">        <span class="keyword">const</span> key = m;</span><br><span class="line">        <span class="keyword">const</span> value = params[m];</span><br><span class="line">        formData.append(key, value);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> instance.request(&#123;</span><br><span class="line">    method: <span class="string">&#x27;post&#x27;</span>,</span><br><span class="line">    ...config,</span><br><span class="line">    url,</span><br><span class="line">    data: formData,</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">instance.formdata = <span class="function">(<span class="params">url, data, config = &#123;&#125;</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> formData = qs.stringify(data); <span class="comment">// 会将汉字encode</span></span><br><span class="line">  <span class="keyword">return</span> instance.request(&#123;</span><br><span class="line">    ...config,</span><br><span class="line">    url,</span><br><span class="line">    data: formData,</span><br><span class="line">    method: config.method || <span class="string">&#x27;post&#x27;</span>,</span><br><span class="line">    headers: &#123; ...config.headers, <span class="string">&#x27;Content-Type&#x27;</span>: <span class="string">&#x27;application/x-www-form-urlencoded&#x27;</span> &#125;,</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 请求拦截器</span></span><br><span class="line">instance.interceptors.request.use(<span class="function"><span class="params">config</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> &#123; params = &#123;&#125; &#125; = config;</span><br><span class="line">    config.params = &#123; ...params, time: <span class="keyword">new</span> <span class="built_in">Date</span>().getTime() &#125;;</span><br><span class="line">    <span class="comment">// add token if need</span></span><br><span class="line">    config.headers = &#123;</span><br><span class="line">      ...(config.headers || &#123;&#125;),</span><br><span class="line">      <span class="string">&#x27;X-Auth-Token&#x27;</span>: CookieStorage.token,</span><br><span class="line">      <span class="string">&#x27;X-Stargate-AppId&#x27;</span>: <span class="number">25</span>,</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="keyword">return</span> config;</span><br><span class="line">  &#125;, <span class="function"><span class="params">err</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// show err</span></span><br><span class="line">  &#125;</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 响应拦截器</span></span><br><span class="line">instance.interceptors.response.use(<span class="function"><span class="params">response</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Promise</span>.resolve(response);</span><br><span class="line">  &#125;, <span class="function"><span class="params">error</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// show error_msg and reject</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;响应失败信息&#x27;</span>, error.response);</span><br><span class="line">    <span class="keyword">if</span> (error &amp;&amp; error.response &amp;&amp; error.response.status) &#123;</span><br><span class="line">      <span class="keyword">let</span> errCode = <span class="number">0</span>;</span><br><span class="line">      <span class="keyword">let</span> errMsg = <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">      <span class="keyword">if</span> (!!error.response.data) &#123;</span><br><span class="line">        <span class="keyword">const</span> &#123; status, errorMsg &#125; = error.response.data;</span><br><span class="line">        errCode = status;</span><br><span class="line">        errMsg = errorMsg;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="keyword">switch</span> (error.response.status) &#123;</span><br><span class="line">        <span class="keyword">case</span> <span class="number">400</span>:</span><br><span class="line">          <span class="built_in">window</span>._vm.$messageSelf.error(errMsg);</span><br><span class="line">          <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="number">401</span>:</span><br><span class="line">          <span class="comment">// to login or authorize</span></span><br><span class="line">          <span class="built_in">window</span>._vm.$messageSelf.error(errMsg);</span><br><span class="line">          CookieStorage.clear();</span><br><span class="line">          <span class="comment">// window.location.href = &#x27;&#x27;;</span></span><br><span class="line">          <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="number">403</span>:</span><br><span class="line">          <span class="comment">// to login or authorize</span></span><br><span class="line">          <span class="built_in">window</span>._vm.$messageSelf.error(errMsg);</span><br><span class="line">          CookieStorage.clear();</span><br><span class="line">          <span class="built_in">window</span>.location.href = <span class="string">&#x27;/&#x27;</span>;</span><br><span class="line">          <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="number">404</span>:</span><br><span class="line">          <span class="comment">// request failed, no res on server</span></span><br><span class="line">          <span class="built_in">window</span>._vm.$messageSelf.error(<span class="string">&#x27;系统错误，请稍候再试&#x27;</span>);</span><br><span class="line">          <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="number">500</span>:</span><br><span class="line">          <span class="comment">// server error</span></span><br><span class="line">          <span class="built_in">window</span>._vm.$messageSelf.error(errMsg);</span><br><span class="line">          <span class="keyword">break</span>;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Promise</span>.reject(error);</span><br><span class="line">  &#125;</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> instance;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="新建一个common-api-ts对公共请求进行封装"><a href="#新建一个common-api-ts对公共请求进行封装" class="headerlink" title="新建一个common-api.ts对公共请求进行封装"></a>新建一个common-api.ts对公共请求进行封装</h2><blockquote>
<p>引入<code>http.ts</code>文件，并根据业务类型进程处理</p>
</blockquote>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> http <span class="keyword">from</span> <span class="string">&#x27;@/utils/http&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">commonRequest</span>(<span class="params">path: <span class="built_in">string</span>, params: <span class="built_in">any</span> = &#123;&#125;, method: <span class="built_in">string</span> = &#x27;get&#x27;</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (method === <span class="string">&#x27;post&#x27;</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> http.post(path, params).then(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">Promise</span>.resolve(res.data);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> http.get(path, &#123; params &#125;).then(<span class="function"><span class="params">res</span> =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="built_in">Promise</span>.resolve(res.data);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="具体使用"><a href="#具体使用" class="headerlink" title="具体使用"></a>具体使用</h2><blockquote>
<p>按照<code>commonRequest</code>方法要求进行传参，并使用。根据不同的接口名，匹配不同的接口地址。</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;handleRequest(&#x27;/music-api&#x27;)&quot;</span>&gt;</span>/music-api<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;handleRequest(&#x27;/music-lyric&#x27;)&quot;</span>&gt;</span>/music-lyric<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;handleRequest(&#x27;/one-api&#x27;)&quot;</span>&gt;</span>/one-api<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;handleRequest(&#x27;/diary-api&#x27;)&quot;</span>&gt;</span>/diary-api<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>&#123;&#123; showData &#125;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">lang</span>=<span class="string">&#x27;ts&#x27;</span>&gt;</span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> &#123; defineComponent &#125; <span class="keyword">from</span> <span class="string">&quot;@vue/runtime-core&quot;</span>;</span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> &#123; ref &#125; <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span></span><br><span class="line"><span class="javascript"><span class="keyword">import</span> &#123; commonRequest &#125; <span class="keyword">from</span> <span class="string">&quot;../api/http&quot;</span>;</span></span><br><span class="line"></span><br><span class="line"><span class="javascript"><span class="keyword">export</span> <span class="keyword">default</span> defineComponent(&#123;</span></span><br><span class="line"><span class="javascript">  setup: <span class="function">() =&gt;</span> &#123;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">let</span> showData = ref(<span class="string">&quot;e&quot;</span>);</span></span><br><span class="line"></span><br><span class="line"><span class="javascript">    <span class="function"><span class="keyword">function</span> <span class="title">handleRequest</span>(<span class="params">api: string</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">      commonRequest(api, &#123;&#125;).then(<span class="function">(<span class="params">res</span>) =&gt;</span> (showData.value = res));</span></span><br><span class="line">    &#125;</span><br><span class="line"><span class="javascript">    <span class="keyword">return</span> &#123; showData, handleRequest &#125;;</span></span><br><span class="line">  &#125;,</span><br><span class="line">&#125;);</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
 
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
    </footer>
  </div>

    
 
   
</article>

    
    <article
  id="post-旅行"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2021/08/25/%E6%97%85%E8%A1%8C/"
    >【旅行日记】稻城亚丁</a> 
</h2>
 

    </header>
     
    <div class="article-meta">
      <a href="/2021/08/25/%E6%97%85%E8%A1%8C/" class="article-date">
  <time datetime="2021-08-25T02:21:42.000Z" itemprop="datePublished">2021-08-25</time>
</a> 
  <div class="article-category">
    <a class="article-category-link" href="/categories/%E6%97%A5%E5%B8%B8/">日常</a>
  </div>
   
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <p>  八月中下旬的时候，趁着中风险地区解封、疫情好转 赶紧把四天的福利假给调了<br>  本来还想组织下语言下午发的，不小心直接按了回车发给项目经理😂 （不是第一次了<br>  周一的早上九点多 顺利请了后面四天的假 哈哈哈<br>  一整天都无心工作 脑子里想的都是 要去稻城亚丁还是去九寨沟<br>  为了充分利用完六天长假 最后报了五天的稻城亚丁！<br>  出发前一天晚上 <code>蓝色暴雨预警</code> <del>不愿在笑man</del><br>  早上也是下了小雨，预约了早上五点的网约车，师傅三点多就到等候点了，我到的时候他在车上已经睡着了<br>  路上聊了几句，知道我是一个人去报团旅游一直嘱咐我出门要跟家里人报信、出去玩最好找认识的人一起<br>  最好在团里找个人一起…  当时就感觉好暖啊！！<br>  因为路上暴雨滑坡耽误了一些时间 到了新都桥那边的酒店吃完饭的已经九十点钟了<br>  因为有必须要买的东西，不得不十点了还去找商店，周边基本都是酒店，走了十多分钟才找到一家<br>  很幸运店家刚准备关门，结账的时候老板问我酒店在附近吗<br>  我说没有 走了十几二十分钟才找到这一家😭<br>  他也嘱咐我说 以后晚上出门要结伴、这么晚一个人不安全…    </p>
<hr>
<p>  后面几天的行程基本和另外两个团友 <del>（一个比我大四天的小姐姐和一个上海过来的小哥）</del> 一起度过的、没觉得孤单、挺开心的<br>  还有个60多岁的老奶奶也是一个人报团的 十一公里四千多米的山路也走完了全程 还是蛮佩服的<br>  顺便夸自己一嘴 我们是第一批到的牛奶海 没有🏇， 纯徒步（感觉自己身体素质还可以<br>  当然 有好的身体素质还要做出好的选择，很多人看到路标五色海比较近就先去五色海了<br>  但是去五色海那个路真的陡 也很耗时，先去牛奶海 返程再去五色海是最佳选择😁  </p>
<p>  山顶的风景确实不错 但是对于去过西藏的人来说 还是差点意思<br>  感觉去了西藏之后 看哪的风景都不会觉得太惊艳了 有机会还想去西藏！</p>
 
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
    </footer>
  </div>

    
 
   
</article>

    
    <article
  id="post-harmonyOS"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2021/05/18/harmonyOS/"
    >HarmonyOS初尝试</a> 
</h2>
 

    </header>
     
    <div class="article-meta">
      <a href="/2021/05/18/harmonyOS/" class="article-date">
  <time datetime="2021-05-18T04:21:42.000Z" itemprop="datePublished">2021-05-18</time>
</a> 
  <div class="article-category">
    <a class="article-category-link" href="/categories/HarmonyOS/">HarmonyOS</a>
  </div>
   
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <blockquote>
<p>抱着凑热闹的心态4月30号赶上了harmony开发者一轮公测报名的末班车，经过漫长的等待终于5月12号晚上收到了短信，十几分钟后系统就给推送了。当时收到推送还是很激动的，马上就更新了。总的来说挺好、没发现什么bug太严重的bug。</p>
</blockquote>
<h2 id="官方文档"><a href="#官方文档" class="headerlink" title="官方文档"></a><a target="_blank" rel="noopener" href="https://developer.harmonyos.com/cn/docs/documentation/doc-guides/harmonyos-overview-0000000000011903">官方文档</a></h2><blockquote>
<p>UI框架主要分为<code>java</code>和<code>js</code>,js应用所用到的东西和原生js、html、css没有太大差别，有的语法和vue有些相似，上手应该是比较容易的。主要是这个开发工具用的不太熟悉。<br>主要问题是 previewer 的时候可以进行热更新但是不能进行网络请求。我不知道是我操作的问题还是本来就不允许。看了官方文档是说的部分接口不能请求。</p>
</blockquote>
<h2 id="主要目录结构"><a href="#主要目录结构" class="headerlink" title="主要目录结构"></a>主要目录结构</h2><blockquote>
<p>主要是在 <code>entry/main/js</code> 下进行编写</p>
</blockquote>
<p>各个文件夹的作用：</p>
<ul>
<li><code>app.js</code>文件用于全局JavaScript逻辑和应用生命周期管理。</li>
<li><code>pages</code>目录用于存放所有组件页面。</li>
<li><code>common</code>目录用于存放公共资源文件，比如：媒体资源，自定义组件和JS文件。</li>
<li><code>resources</code>目录用于存放资源配置文件，比如：全局样式、多分辨率加载等配置文件。</li>
<li><code>i18n</code>目录用于配置不同语言场景资源内容，比如：应用文本词条，图片路径等资源。</li>
<li><code>share</code>目录用于配置多个实例共享的资源内容，比如：share中的图片和JSON文件可被default1和default2实例共享。</li>
</ul>
<h3 id="pages"><a href="#pages" class="headerlink" title="pages"></a>pages</h3><blockquote>
<p>一个文件夹对应一个页面。并且要在config.json文件下对路由进行配置</p>
</blockquote>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// pages数组内排在首位的 代表展示的首页</span></span><br><span class="line">&quot;js&quot;: [</span><br><span class="line">  &#123;</span><br><span class="line">    <span class="attr">&quot;pages&quot;</span>: [</span><br><span class="line">      <span class="string">&quot;pages/demo/demo&quot;</span>,    <span class="comment">// 对应demo.hml </span></span><br><span class="line">      <span class="string">&quot;pages/index/index&quot;</span></span><br><span class="line">    ],</span><br><span class="line">    <span class="attr">&quot;name&quot;</span>: <span class="string">&quot;default&quot;</span>,</span><br><span class="line">  &#125;</span><br><span class="line">]</span><br></pre></td></tr></table></figure>

<h3 id="i18n"><a href="#i18n" class="headerlink" title="i18n"></a>i18n</h3><blockquote>
<p>内部存放的是<code>.json</code>文件，在页面中使用的时候直接通过 <code>$t(&#39;...&#39;)</code> 来获取</p>
</blockquote>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// zh-CN.json</span></span><br><span class="line">&#123;</span><br><span class="line">  <span class="attr">&quot;strings&quot;</span>: &#123;</span><br><span class="line">    <span class="attr">&quot;app_bar&quot;</span>: &#123;</span><br><span class="line">      <span class="attr">&quot;title&quot;</span>: <span class="string">&quot;标题&quot;</span></span><br><span class="line">    &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">// index.hml</span><br><span class="line"><span class="tag">&lt;<span class="name">text</span>&gt;</span></span><br><span class="line"> &#123;&#123; $t(&#x27;strings.app_bar.title&#x27;) &#125;&#125;  </span><br><span class="line"> <span class="comment">&lt;!-- 标题 --&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">text</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="组件相关"><a href="#组件相关" class="headerlink" title="组件相关"></a>组件相关</h2><blockquote>
<p>例如在 <code>common</code>  中创建 <code>component</code> 文件夹，存放公共组件。以<code>tabbar</code>组件为例</p>
</blockquote>
<h3 id="组件使用"><a href="#组件使用" class="headerlink" title="组件使用"></a>组件使用</h3><blockquote>
<p>通过element标签进行获取、使用</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- tabbar.hml --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">toolbar</span>&gt;</span>....<span class="tag">&lt;/<span class="name">toolbar</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- home.hml --&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 在页面的顶部通过element引入组件所在的地址 并且通过name属性取名 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">element</span> <span class="attr">name</span>=<span class="string">&#x27;tab-bar-com&#x27;</span> <span class="attr">src</span>=<span class="string">&#x27;../../common/component/tabbar/tabbar.hml&#x27;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">element</span>&gt;</span></span><br><span class="line"></span><br><span class="line">...</span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">  ...</span><br><span class="line">  <span class="comment">&lt;!-- 把组件放在页面需要的位置 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">tab-bar-com</span>&gt;</span><span class="tag">&lt;/<span class="name">tab-bar-com</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="父子组件传值"><a href="#父子组件传值" class="headerlink" title="父子组件传值"></a>父子组件传值</h3><blockquote>
<p>与vue类似，子组件通过props接收父组件的数据，父组件通过@获取子组件传递的数据</p>
</blockquote>
<blockquote>
<p>子组件tabbar</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- tabbar.hml --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">toolbar</span> <span class="attr">style</span>=<span class="string">&quot;position : fixed; bottom : 0px;&quot;</span> <span class="attr">data</span>=<span class="string">&#x27;hello&#x27;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">toolbar-item</span> <span class="attr">icon</span>=<span class="string">&#x27;&#123;&#123; iconurl &#125;&#125;&#x27;</span> <span class="attr">value</span>=<span class="string">&#x27;我的&#x27;</span> <span class="attr">on:click</span>=<span class="string">&quot;handleClick&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">toolbar-item</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">toolbar</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// tabbar.js</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    props: [<span class="string">&#x27;iconurl&#x27;</span>],   <span class="comment">// 接收父组件传来的数据</span></span><br><span class="line"></span><br><span class="line">    handleClick(e)&#123;</span><br><span class="line">      <span class="comment">// emit来广播给父组件 传递给父组件数据</span></span><br><span class="line">      <span class="built_in">this</span>.$emit(<span class="string">&#x27;getItem&#x27;</span>, &#123;</span><br><span class="line">            title: e.target.attr.value</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>父组件</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- home.hml --&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 通过绑定属性的方式把数据传递给子组件 --&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 通过 @..=&#x27;fn&#x27; 的方式获取子组件传递的数据 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">tab-bar-com</span> <span class="attr">iconurl</span>=<span class="string">&#x27;https://....&#x27;</span> @<span class="attr">get-item</span>=<span class="string">&#x27;getTabbarItem&#x27;</span>&gt;</span><span class="tag">&lt;/<span class="name">tab-bar-com</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// home.js</span></span><br><span class="line"><span class="keyword">export</span>.default&#123;</span><br><span class="line">  <span class="comment">// 获取子组件传来的数据</span></span><br><span class="line">  getTabbarItem(item) &#123;</span><br><span class="line">    <span class="comment">// 还有一层 detail</span></span><br><span class="line">        <span class="built_in">console</span>.log(item.detail.title) <span class="comment">// 我的</span></span><br><span class="line">    &#125;,</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
 
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
    </footer>
  </div>

    
 
   
</article>

    
    <article
  id="post-vue3-音乐播放器"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2021/04/29/vue3-%E9%9F%B3%E4%B9%90%E6%92%AD%E6%94%BE%E5%99%A8/"
    >Vue3-音乐播放器</a> 
</h2>
 

    </header>
     
    <div class="article-meta">
      <a href="/2021/04/29/vue3-%E9%9F%B3%E4%B9%90%E6%92%AD%E6%94%BE%E5%99%A8/" class="article-date">
  <time datetime="2021-04-29T07:16:00.000Z" itemprop="datePublished">2021-04-29</time>
</a> 
  <div class="article-category">
    <a class="article-category-link" href="/categories/vue/">vue</a>
  </div>
   
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <h4 id="在线展示"><a href="#在线展示" class="headerlink" title="在线展示"></a><a target="_blank" rel="noopener" href="https://zzdoreen.github.io/vite-vue3-ts/dist/#/music">在线展示</a></h4><h4 id="API文档"><a href="#API文档" class="headerlink" title="API文档"></a>API文档</h4><ul>
<li><a target="_blank" rel="noopener" href="https://www.free-api.com/doc/302">网易云音乐随机歌曲</a></li>
</ul>
<blockquote>
<p>接口说明  </p>
</blockquote>
<table>
<thead>
<tr>
<th align="left"></th>
<th align="center"></th>
</tr>
</thead>
<tbody><tr>
<td align="left">地址</td>
<td align="center"><a target="_blank" rel="noopener" href="https://api.uomg.com/api/rand.music">https://api.uomg.com/api/rand.music</a></td>
</tr>
<tr>
<td align="left">返回格式</td>
<td align="center">json / mp3</td>
</tr>
<tr>
<td align="left">请求方式</td>
<td align="center">get / post</td>
</tr>
</tbody></table>
<hr>
<blockquote>
<p>请求参数</p>
</blockquote>
<table>
<thead>
<tr>
<th align="left">名称</th>
<th align="center">类型</th>
<th align="center">必填</th>
<th align="center">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left">sort</td>
<td align="center">string</td>
<td align="center">选填</td>
<td align="center">默认为热歌榜 [热歌榜,新歌榜,飙升榜,抖音榜,电音榜]</td>
</tr>
<tr>
<td align="left">mid</td>
<td align="center">int</td>
<td align="center">选填</td>
<td align="center">网易云歌单ID</td>
</tr>
<tr>
<td align="left">format</td>
<td align="center">string</td>
<td align="center">选填</td>
<td align="center">选择输出的格式</td>
</tr>
</tbody></table>
<hr>
<blockquote>
<p>返回参数</p>
</blockquote>
<table>
<thead>
<tr>
<th align="left">名称</th>
<th align="center">类型</th>
<th align="center">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left">code</td>
<td align="center">string</td>
<td align="center">状态码</td>
</tr>
<tr>
<td align="left">name</td>
<td align="center">string</td>
<td align="center">歌曲名称</td>
</tr>
<tr>
<td align="left">url</td>
<td align="center">string</td>
<td align="center">歌曲地址</td>
</tr>
<tr>
<td align="left">picurl</td>
<td align="center">string</td>
<td align="center">歌曲封面地址</td>
</tr>
</tbody></table>
<hr>
<blockquote>
<p>返回示例</p>
</blockquote>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="attr">&quot;code&quot;</span>: <span class="number">1</span>,</span><br><span class="line">    <span class="attr">&quot;data&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">&quot;name&quot;</span>: <span class="string">&quot;江南&quot;</span>,</span><br><span class="line">        <span class="attr">&quot;url&quot;</span>: <span class="string">&quot;http://music.163.com/song/media/outer/url?id=26305527&quot;</span>,</span><br><span class="line">        <span class="attr">&quot;picurl&quot;</span>: <span class="string">&quot;http://p4.music.126.net/CcthX_ZCexIdriZADoNn3g==/109951165628166191.jpg&quot;</span>,</span><br><span class="line">        <span class="attr">&quot;artistsname&quot;</span>: <span class="string">&quot;林俊杰&quot;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>歌词接口</li>
</ul>
<blockquote>
<p>接口说明  </p>
</blockquote>
<table>
<thead>
<tr>
<th align="left"></th>
<th align="center"></th>
</tr>
</thead>
<tbody><tr>
<td align="left">地址</td>
<td align="center"><a target="_blank" rel="noopener" href="https://api.imjad.cn/cloudmusic">https://api.imjad.cn/cloudmusic</a></td>
</tr>
<tr>
<td align="left">返回格式</td>
<td align="center">json</td>
</tr>
<tr>
<td align="left">请求方式</td>
<td align="center">get / post</td>
</tr>
</tbody></table>
<hr>
<blockquote>
<p>请求参数</p>
</blockquote>
<table>
<thead>
<tr>
<th align="left">名称</th>
<th align="center">类型</th>
<th align="center">必填</th>
<th align="center">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left">type</td>
<td align="center">string</td>
<td align="center">必填</td>
<td align="center">值为<code>lyric</code>时，返回歌词</td>
</tr>
<tr>
<td align="left">id</td>
<td align="center">int</td>
<td align="center">必填</td>
<td align="center">网易云歌区ID</td>
</tr>
</tbody></table>
<hr>
<blockquote>
<p>返回参数</p>
</blockquote>
<table>
<thead>
<tr>
<th align="left">名称</th>
<th align="center"></th>
<th align="center">类型</th>
<th align="center">描述</th>
</tr>
</thead>
<tbody><tr>
<td align="left">code</td>
<td align="center"></td>
<td align="center">string</td>
<td align="center">状态码</td>
</tr>
<tr>
<td align="left">lrc</td>
<td align="center"></td>
<td align="center">object</td>
<td align="center">歌词数据</td>
</tr>
<tr>
<td align="left"></td>
<td align="center">version</td>
<td align="center">int</td>
<td align="center">版本</td>
</tr>
<tr>
<td align="left"></td>
<td align="center">lyric</td>
<td align="center">string</td>
<td align="center">歌词</td>
</tr>
</tbody></table>
<hr>
<blockquote>
<p>返回示例</p>
</blockquote>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    <span class="attr">&quot;sgc&quot;</span>: <span class="literal">false</span>,</span><br><span class="line">    <span class="attr">&quot;sfy&quot;</span>: <span class="literal">false</span>,</span><br><span class="line">    <span class="attr">&quot;qfy&quot;</span>: <span class="literal">false</span>,</span><br><span class="line">    <span class="attr">&quot;lrc&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">&quot;version&quot;</span>: <span class="number">8</span>,</span><br><span class="line">        <span class="attr">&quot;lyric&quot;</span>: <span class="string">&quot;[00:00.000] 作曲 : 祝何\n[00:00.693] 作词 : 祝何\n[00:02.80]编曲 Arranger：祝何\n[00:06.84]楚河流沙几聚散 日月沧桑尽变换\n[00:35.08]乱世多少红颜换一声长叹\n[00:40.38]谁曾巨鹿踏破了秦关 千里兵戈血染\n[00:46.45]终究也不过是风轻云淡\n[00:51.51]长枪策马平天下 此番诀别却为难\n[00:57.72]一声虞兮虞兮泪眼已潸然\n[01:03.07]与君共饮这杯中冷暖 西风彻夜回忆吹不断\n[01:09.38]醉里挑灯看剑 妾舞阑珊\n[01:14.91]垓下一曲离乱 楚歌声四方\n[01:20.31]含悲 辞君 饮剑 血落凝寒霜\n[01:25.87]难舍一段过往 缘尽又何妨\n[01:31.77]与你魂归之处便是苍茫\n[02:00.25]长枪策马平天下 此番诀别却为难\n[02:06.17]一声虞兮虞兮泪眼已潸然\n[02:11.70]与君共饮这杯中冷暖 西风彻夜回忆吹不断\n[02:18.00]醉里挑灯看剑 妾舞阑珊\n[02:23.25]垓下一曲离乱 楚歌声四方\n[02:28.74]含悲 辞君 饮剑 血落凝寒霜\n[02:34.73]难舍一段过往 缘尽又何妨\n[02:40.11]与你魂归之处便是苍茫\n[02:46.39]汉兵刀剑纷乱 折断了月光\n[02:51.55]江畔 只身 孤舟 余生不思量\n[02:57.42]难舍一段过往 缘尽又何妨\n[03:03.01]与你来生共寄山高水长\n[03:13.11]混音师 Mixing Engineer：唐瑜\n[03:13.78]和声 Backing vocals：田跃君\n[03:14.24]制作人 Produced by ：蒋雪儿 Snow.J\n[03:14.67]监制 Executive producer: 蒋雪儿 Snow.J\n[03:15.18]OP/SP ：乐无限 ETERNAL MUSIC\n[03:15.90]【未经授权不得翻唱或使用】\n&quot;</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">&quot;klyric&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">&quot;version&quot;</span>: <span class="number">0</span>,</span><br><span class="line">        <span class="attr">&quot;lyric&quot;</span>: <span class="literal">null</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">&quot;tlyric&quot;</span>: &#123;</span><br><span class="line">        <span class="attr">&quot;version&quot;</span>: <span class="number">0</span>,</span><br><span class="line">        <span class="attr">&quot;lyric&quot;</span>: <span class="literal">null</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">&quot;code&quot;</span>: <span class="number">200</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="基本思路"><a href="#基本思路" class="headerlink" title="基本思路"></a>基本思路</h4><h5 id="音乐播放-——-audio"><a href="#音乐播放-——-audio" class="headerlink" title="音乐播放 —— audio"></a>音乐播放 —— <a target="_blank" rel="noopener" href="https://www.w3school.com.cn/jsref/dom_obj_audio.asp">audio</a></h5><blockquote>
<p>html内添加audio标签进行相关配置  </p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">audio</span></span></span><br><span class="line"><span class="tag">    <span class="attr">ref</span>=<span class="string">&quot;audio&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">autoplay</span></span></span><br><span class="line"><span class="tag">    @<span class="attr">pause</span>=<span class="string">&quot;handlePause&quot;</span></span></span><br><span class="line"><span class="tag">    @<span class="attr">play</span>=<span class="string">&quot;handlePlay&quot;</span></span></span><br><span class="line"><span class="tag">    @<span class="attr">timeupdate</span>=<span class="string">&quot;handleMusicTimeChange&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">:src</span>=<span class="string">&quot;music.value.url&quot;</span></span></span><br><span class="line"><span class="tag">&gt;</span><span class="tag">&lt;/<span class="name">audio</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- </span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    绑定ref方便用js对Audio对象进行操作</span></span><br><span class="line"><span class="comment">    </span></span><br><span class="line"><span class="comment">    用到的属性：</span></span><br><span class="line"><span class="comment">        autoplay 是否自动播放</span></span><br><span class="line"><span class="comment">        src 音频地址</span></span><br><span class="line"><span class="comment">    </span></span><br><span class="line"><span class="comment">    用到的方法：</span></span><br><span class="line"><span class="comment">        pause 暂停当前播放的音频时触发</span></span><br><span class="line"><span class="comment">        play  开始播放音频时触发</span></span><br><span class="line"><span class="comment">        timeupdate 播放位置发生改变时触发</span></span><br><span class="line"><span class="comment"> --&gt;</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="歌词获取和展示"><a href="#歌词获取和展示" class="headerlink" title="歌词获取和展示"></a>歌词获取和展示</h5><ol>
<li>首先将获取随机歌曲和歌词数据的方法封装成一个方法</li>
</ol>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123; ref, reactive &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> &#123; getData &#125; <span class="keyword">from</span> <span class="string">&quot;../api/api&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; toSeconds &#125; <span class="keyword">from</span> <span class="string">&#x27;../utils/time&#x27;</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">useMusic</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 随机歌曲相关信息获取</span></span><br><span class="line">    <span class="keyword">let</span> datas: <span class="built_in">any</span> = <span class="keyword">await</span> getData(<span class="number">2</span>, <span class="string">&quot;&quot;</span>, &#123;&#125;);</span><br><span class="line">    <span class="keyword">let</span> music = reactive(&#123; value: datas.data.data &#125;);</span><br><span class="line">    <span class="keyword">let</span> music_id = ref(music.value.url.split(<span class="string">&quot;?id=&quot;</span>)[<span class="number">1</span>]);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 歌词通过歌曲id获取</span></span><br><span class="line">    <span class="keyword">let</span> lyric: <span class="built_in">any</span> = <span class="keyword">await</span> getData(<span class="number">3</span>, <span class="string">&quot;&quot;</span>, &#123;</span><br><span class="line">        <span class="keyword">type</span>: <span class="string">&quot;lyric&quot;</span>,</span><br><span class="line">        id: music_id.value,</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="comment">// 对歌词数据进行处理 [&#123;text:&#x27;歌词&#x27;,time:2.333 (歌词开始秒数)&#125;,...] </span></span><br><span class="line">    <span class="keyword">let</span> arr = lyric.data.lrc.lyric.split(<span class="string">&#x27;\n&#x27;</span>)</span><br><span class="line">    <span class="keyword">let</span> obj: <span class="built_in">any</span> = reactive(&#123; data: [] &#125;)</span><br><span class="line">    arr.forEach(<span class="function">(<span class="params">element: <span class="built_in">string</span></span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">let</span> key = toSeconds(element.split(<span class="string">&#x27;]&#x27;</span>)[<span class="number">0</span>].slice(<span class="number">1</span>))</span><br><span class="line">        <span class="keyword">let</span> value = element.split(<span class="string">&#x27;]&#x27;</span>)[<span class="number">1</span>]</span><br><span class="line">        obj.data.push(&#123; text: value, time: key &#125;)</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 设置一个index作为歌词数据的索引</span></span><br><span class="line">    <span class="keyword">let</span> index = ref(<span class="number">0</span>)</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> &#123; index, obj, music &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<ol start="2">
<li>对audio标签绑定ref，对audio对象进行操作。</li>
</ol>
<ul>
<li>对<code>timeupdate</code>事件进行监听<ul>
<li>通过<code>audio.value.currentTime</code>获取到当前播放的秒数</li>
<li>从前向后与歌词数据 (<code>obj.data[index.value + 1].time</code>) 的<code>time</code>进行对比</li>
<li>如果当前秒数小于当前索引的歌词数据的秒数、就展示该条歌词数据；否则<code>index++</code>与下一条数据进行比较</li>
</ul>
</li>
</ul>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> defineComponent(&#123;</span><br><span class="line">  setup: <span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">    <span class="comment">// 在异步组合api中，生命周期函数必须写在 数据/方法前面 </span></span><br><span class="line">    onMounted(<span class="function">() =&gt;</span> &#123;&#125;);</span><br><span class="line"></span><br><span class="line">    <span class="keyword">let</span> &#123; index,obj,music &#125; = <span class="keyword">await</span> useMusic();</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 绑定audio对象</span></span><br><span class="line">    <span class="keyword">let</span> audio = ref(); </span><br><span class="line"></span><br><span class="line">    <span class="comment">// 每条歌词数据</span></span><br><span class="line">    <span class="keyword">let</span> msg = obj.data &amp;&amp; obj.data[<span class="number">0</span>].text ? ref(obj.data[<span class="number">0</span>].text) : ref(<span class="string">&quot; &quot;</span>);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 进度条改变触发事件</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">handleMusicTimeChange</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="keyword">if</span> (audio.value.currentTime &gt;= obj.data[index.value + <span class="number">1</span>].time) &#123;</span><br><span class="line">        index.value++;</span><br><span class="line">      &#125;</span><br><span class="line">      msg.value = obj.data[index.value].text;</span><br><span class="line">      </span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      msg,</span><br><span class="line">      index,</span><br><span class="line">      obj,</span><br><span class="line">      audio,</span><br><span class="line">      music,</span><br><span class="line">      handleMusicTimeChange,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;);</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h5 id="未解决的问题"><a href="#未解决的问题" class="headerlink" title="未解决的问题"></a>未解决的问题</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 目前的播放器进度条不能进行控制 控制之后 不知道怎么获取对应索引的歌词</span></span><br><span class="line"><span class="comment"> * （ </span></span><br><span class="line"><span class="comment"> * 进度条长度和音频总时长是按比例的</span></span><br><span class="line"><span class="comment"> * 所以进度条播放位置发生改变时 timeupdate对于不同长度的歌曲触发秒数间隔都是不一样的</span></span><br><span class="line"><span class="comment"> * currentTime也不一定能和time对应上 所以不知道怎么获取到歌词</span></span><br><span class="line"><span class="comment"> * </span></span><br><span class="line"><span class="comment"> * 不知道怎么实现QAQ , 所以就没展示audio的控件(controls) </span></span><br><span class="line"><span class="comment"> * ）</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>
 
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
    </footer>
  </div>

    
 
   
</article>

    
    <article
  id="post-vite"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2021/04/08/vite/"
    >Vue3+Vite+ElementPlus+VueRouter相关配置</a> 
</h2>
 

    </header>
     
    <div class="article-meta">
      <a href="/2021/04/08/vite/" class="article-date">
  <time datetime="2021-04-08T07:16:00.000Z" itemprop="datePublished">2021-04-08</time>
</a> 
  <div class="article-category">
    <a class="article-category-link" href="/categories/vue/">vue</a>
  </div>
   
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <p><a target="_blank" rel="noopener" href="https://zzdoreen.github.io/vite-vue3-ts/dist/index#/login">demo在线展示</a> |<br><a target="_blank" rel="noopener" href="https://github.com/zzdoreen/vite-vue3-ts">仓库地址</a></p>
<blockquote>
<p>element-plus源码有点问题 打包的时候会报错，需要手动修改…  </p>
</blockquote>
<p><a target="_blank" rel="noopener" href="https://cn.vitejs.dev/guide/"><code>vite中文文档</code></a></p>
<blockquote>
<p>前端构建工具，能够显著提升前端开发体验</p>
</blockquote>
<h2 id="初始化项目"><a href="#初始化项目" class="headerlink" title="初始化项目"></a>初始化项目</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm init @vitejs&#x2F;app</span><br></pre></td></tr></table></figure>

<h2 id="element-plus-UI"><a href="#element-plus-UI" class="headerlink" title="element-plus UI"></a>element-plus UI</h2><blockquote>
<p>element-ui没有兼容vue3，但是新推出了<a target="_blank" rel="noopener" href="https://element-plus.gitee.io/#/zh-CN/component/installation"><code>element-plus</code></a>来兼容vue3</p>
</blockquote>
<h3 id="安装element-plus"><a href="#安装element-plus" class="headerlink" title="安装element-plus"></a>安装element-plus</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i element-plus -S</span><br></pre></td></tr></table></figure>

<h3 id="修改配置文件引入库"><a href="#修改配置文件引入库" class="headerlink" title="修改配置文件引入库"></a>修改配置文件引入库</h3><blockquote>
<p>修改<code>main.ts</code></p>
</blockquote>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; createApp &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">&#x27;./App.vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> ElementPlus <span class="keyword">from</span> <span class="string">&#x27;element-plus&#x27;</span>  <span class="comment">// +</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;element-plus/lib/theme-chalk/index.css&#x27;</span> <span class="comment">// +</span></span><br><span class="line"></span><br><span class="line">createApp(App).use(ElementPlus).mount(<span class="string">&#x27;#app&#x27;</span>)  <span class="comment">// .use(ElementPlus)</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="ElMessageBox消息弹框"><a href="#ElMessageBox消息弹框" class="headerlink" title="ElMessageBox消息弹框"></a>ElMessageBox消息弹框</h3><blockquote>
<p>一个我自己推出来的功能.. 文档没找着<br>原因是我要在setup里面使用消息弹框组件 但按文档的配置需要用到this</p>
</blockquote>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 但是文档上是写的 this.$alert(&#x27;...&#x27;)</span></span><br><span class="line"><span class="comment">// 众所周知 vue3 的setup里面没有 this</span></span><br><span class="line"><span class="comment">// 根据 消息提示 组件的配置方法： ElMessage(&#x27;...&#x27;)</span></span><br><span class="line"><span class="comment">// 我大胆猜想了下消息弹框的使用 然后 成功了..</span></span><br><span class="line"></span><br><span class="line">setup:<span class="function">()=&gt;</span>&#123;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">  ElMessageBox.alert(<span class="string">&#x27;...&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="vue-router"><a href="#vue-router" class="headerlink" title="vue-router"></a>vue-router</h2><h3 id="安装插件"><a href="#安装插件" class="headerlink" title="安装插件"></a>安装插件</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i vue-router@next -S</span><br></pre></td></tr></table></figure>

<h3 id="编写路由配置文件"><a href="#编写路由配置文件" class="headerlink" title="编写路由配置文件"></a>编写路由配置文件</h3><blockquote>
<p>新建<code>router.ts</code>文件<br>没有在<code>vite.config.ts</code>配置的话 不能使用<code>@</code>代替<code>src</code></p>
</blockquote>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; createRouter, createWebHistory &#125; <span class="keyword">from</span> <span class="string">&#x27;vue-router&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> Router = createRouter(&#123;</span><br><span class="line">    history: createWebHistory(),</span><br><span class="line">    routes: [</span><br><span class="line">        &#123;</span><br><span class="line">            path: <span class="string">&#x27;/&#x27;</span>,</span><br><span class="line">            component: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;../components/HelloWorld.vue&#x27;</span>)</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            path: <span class="string">&#x27;/home&#x27;</span>,</span><br><span class="line">            name: <span class="string">&#x27;home&#x27;</span>,</span><br><span class="line">            component: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;../components/Home.vue&#x27;</span>)</span><br><span class="line">        &#125;,</span><br><span class="line">    ]</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> Router</span><br></pre></td></tr></table></figure>

<h3 id="修改配置文件引入库-1"><a href="#修改配置文件引入库-1" class="headerlink" title="修改配置文件引入库"></a>修改配置文件引入库</h3><blockquote>
<p>在<code>main.ts</code>文件内添加内容</p>
</blockquote>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> router <span class="keyword">from</span> <span class="string">&#x27;./router/router&#x27;</span></span><br><span class="line"></span><br><span class="line">createApp(App).use(router).mount(<span class="string">&#x27;#app&#x27;</span>)  <span class="comment">// .use(router)</span></span><br></pre></td></tr></table></figure>

<h3 id="修改App-vue"><a href="#修改App-vue" class="headerlink" title="修改App.vue"></a>修改App.vue</h3><blockquote>
<p>将文件修改成</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 展示路由内容 --&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">router-view</span>&gt;</span><span class="tag">&lt;/<span class="name">router-view</span>&gt;</span>  </span><br><span class="line"> <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="axios"><a href="#axios" class="headerlink" title="axios"></a>axios</h2><h3 id="安装插件-1"><a href="#安装插件-1" class="headerlink" title="安装插件"></a>安装插件</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i axios -S</span><br></pre></td></tr></table></figure>

<h3 id="新建-http-ts-文件对axios进行配置"><a href="#新建-http-ts-文件对axios进行配置" class="headerlink" title="新建 http.ts 文件对axios进行配置"></a>新建 http.ts 文件对axios进行配置</h3><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> axios <span class="keyword">from</span> <span class="string">&#x27;axios&#x27;</span></span><br><span class="line"></span><br><span class="line">axios.defaults.baseURL = <span class="string">&#x27;/api&#x27;</span></span><br><span class="line"><span class="comment">//&#x27;http://rap2api.taobao.org/app/mock/data&#x27;  不代理</span></span><br><span class="line">axios.defaults.timeout = <span class="number">10000</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="function"><span class="keyword">function</span> <span class="title">get</span>(<span class="params">url: <span class="built_in">string</span>, params: <span class="built_in">any</span></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">        axios.get(url, &#123;</span><br><span class="line">            params: params</span><br><span class="line">        &#125;).then(<span class="function">(<span class="params">res</span>) =&gt;</span> &#123;</span><br><span class="line">            resolve(res)</span><br><span class="line">        &#125;).catch(<span class="function">(<span class="params">err</span>) =&gt;</span> &#123;</span><br><span class="line">            reject(err)</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="新建-api-ts-文件对接口请求进行封装"><a href="#新建-api-ts-文件对接口请求进行封装" class="headerlink" title="新建 api.ts 文件对接口请求进行封装"></a>新建 api.ts 文件对接口请求进行封装</h3><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; get &#125; <span class="keyword">from</span> <span class="string">&#x27;./http&#x27;</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">const</span> getData = <span class="function">(<span class="params">url: <span class="built_in">string</span>, params: <span class="built_in">any</span></span>) =&gt;</span> get(url, params)</span><br></pre></td></tr></table></figure>

<h3 id="在-vite-config-ts-中配置proxy代理"><a href="#在-vite-config-ts-中配置proxy代理" class="headerlink" title="在 vite.config.ts 中配置proxy代理"></a>在 vite.config.ts 中配置proxy代理</h3><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// ...</span></span><br><span class="line">server: &#123;</span><br><span class="line">    host: <span class="string">&#x27;10.9.37.4&#x27;</span>,</span><br><span class="line">    port: <span class="number">8080</span>,</span><br><span class="line">    open: <span class="literal">true</span>,</span><br><span class="line">    proxy: &#123;</span><br><span class="line">      <span class="string">&#x27;/api&#x27;</span>: &#123;</span><br><span class="line">        target: <span class="string">&#x27;http://rap2api.taobao.org/app/mock/data&#x27;</span>, <span class="comment">// 目标接口域名</span></span><br><span class="line">        changeOrigin: <span class="literal">true</span>,</span><br><span class="line">        secure: <span class="literal">false</span>,  <span class="comment">// 是否是https</span></span><br><span class="line">        ws: <span class="literal">true</span>,</span><br><span class="line">        rewrite: <span class="function">(<span class="params">path</span>) =&gt;</span> path.replace(<span class="regexp">/^\/api/</span>, <span class="string">&#x27;&#x27;</span>) <span class="comment">// 重新接口地址</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<h3 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h3><ul>
<li>引入方法<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; getData &#125; <span class="keyword">from</span> <span class="string">&#x27;../api/api&#x27;</span></span><br></pre></td></tr></table></figure></li>
<li>使用</li>
</ul>
<blockquote>
<p>在组合api中使用异步获取的话 父组件使用的时候要在外层添加 <code>&lt;suspense&gt;</code>进行包裹 不然数据不会展示</p>
</blockquote>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// child component</span></span><br><span class="line">setup: <span class="keyword">async</span> () =&gt; &#123;</span><br><span class="line">        <span class="keyword">let</span> datas: <span class="built_in">any</span> = <span class="keyword">await</span> getData(<span class="string">&#x27;/1531382&#x27;</span>, &#123; scope: <span class="string">&#x27;response&#x27;</span> &#125;)</span><br><span class="line">        </span><br><span class="line">        <span class="keyword">let</span> color = reactive(<span class="built_in">JSON</span>.parse(<span class="built_in">JSON</span>.stringify(datas.data.data.color)))</span><br><span class="line">        <span class="keyword">return</span> &#123; color &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// App.vue</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;suspense&gt;</span><br><span class="line">    &lt;router-view&gt;&lt;/router-view&gt;</span><br><span class="line">  &lt;/suspense&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>


<h2 id="vite-config-ts配置"><a href="#vite-config-ts配置" class="headerlink" title="vite.config.ts配置"></a>vite.config.ts配置</h2><blockquote>
<p><a target="_blank" rel="noopener" href="https://cn.vitejs.dev/config/">详情</a></p>
</blockquote>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; defineConfig &#125; <span class="keyword">from</span> <span class="string">&#x27;vite&#x27;</span></span><br><span class="line"><span class="keyword">import</span> vue <span class="keyword">from</span> <span class="string">&#x27;@vitejs/plugin-vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// https://vitejs.dev/config/</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> defineConfig(&#123;</span><br><span class="line">  plugins: [vue()],</span><br><span class="line">  alias: &#123;</span><br><span class="line">    <span class="string">&#x27;@&#x27;</span>: path.join(__dirname, <span class="string">&#x27;src&#x27;</span>)  <span class="comment">// 配置用@来代表src目录</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="comment">// 服务器相关配置</span></span><br><span class="line">  server: &#123;</span><br><span class="line">    port: <span class="number">8080</span>,</span><br><span class="line">    host: <span class="string">&#x27;0.0.0.0&#x27;</span>,</span><br><span class="line">    open: <span class="literal">true</span>, <span class="comment">// 是否自动开启浏览器</span></span><br><span class="line">  &#125;,</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure> 
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
    </footer>
  </div>

    
 
   
</article>

    
    <article
  id="post-flex"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2021/03/17/flex/"
    >Flex相关</a> 
</h2>
 

    </header>
     
    <div class="article-meta">
      <a href="/2021/03/17/flex/" class="article-date">
  <time datetime="2021-03-17T06:35:39.504Z" itemprop="datePublished">2021-03-17</time>
</a> 
  <div class="article-category">
    <a class="article-category-link" href="/categories/CSS/">CSS</a>
  </div>
   
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <h2 id="父容器的属性"><a href="#父容器的属性" class="headerlink" title="父容器的属性"></a>父容器的属性</h2><h3 id="flex-direction-主轴-项目排列方向"><a href="#flex-direction-主轴-项目排列方向" class="headerlink" title="flex-direction (主轴/项目排列方向)"></a>flex-direction (主轴/项目排列方向)</h3><blockquote>
<p>row(默认，水平，起点在左端)  |  row-reverse  |  column  |  column-reverse</p>
</blockquote>
<h3 id="flex-wrap-是否换行"><a href="#flex-wrap-是否换行" class="headerlink" title="flex-wrap (是否换行)"></a>flex-wrap (是否换行)</h3><blockquote>
<p>nowrap(默认不换行)  |  wrap(换行，第一行在上方)  | wrap-reverse(换行，第一行在下方)</p>
</blockquote>
<h3 id="flex-flow-flex-direction属性和flex-wrap属性的简写形式，默认值为row-nowrap"><a href="#flex-flow-flex-direction属性和flex-wrap属性的简写形式，默认值为row-nowrap" class="headerlink" title="flex-flow (flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap)"></a>flex-flow (flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap)</h3><blockquote>
<p><code>&lt;flex-deirection&gt;</code> || <code>&lt;flex-wrap&gt;</code></p>
</blockquote>
<h3 id="justify-content-主轴的对齐方式"><a href="#justify-content-主轴的对齐方式" class="headerlink" title="justify-content (主轴的对齐方式)"></a>justify-content (主轴的对齐方式)</h3><blockquote>
<p>flex-start(默认 左对齐)  |  flex-end  |  center  |  space-between (两端对齐，项目之间的间隔都相等。)  |  space-around (每个项目两侧的间隔相等)</p>
</blockquote>
<p><img src="https://i.bmp.ovh/imgs/2021/03/51667ee0ea2e4458.png"></p>
<h3 id="align-items-定义项目在交叉轴上如何对齐"><a href="#align-items-定义项目在交叉轴上如何对齐" class="headerlink" title="align-items (定义项目在交叉轴上如何对齐)"></a>align-items (定义项目在交叉轴上如何对齐)</h3><blockquote>
<p>flex-start (交叉轴的起点对齐)  |  flex-end(交叉轴的终点对齐)  |  center(交叉轴的中点对齐)  |  baseline(项目的第一行文字的基线对齐)  |  stretch(默认值 如果项目未设置高度或设为auto，将占满整个容器的高度)  </p>
</blockquote>
<p><img src="https://i.bmp.ovh/imgs/2021/03/ecba85337de824ff.png"></p>
<h2 id="子项目的属性"><a href="#子项目的属性" class="headerlink" title="子项目的属性"></a>子项目的属性</h2><h3 id="order-属性定义项目的排列序列。数值越小排列越靠前，默认为0"><a href="#order-属性定义项目的排列序列。数值越小排列越靠前，默认为0" class="headerlink" title="order (属性定义项目的排列序列。数值越小排列越靠前，默认为0)"></a>order (属性定义项目的排列序列。数值越小排列越靠前，默认为0)</h3><p><img src="https://i.bmp.ovh/imgs/2021/03/36090f39dbc5eade.png"></p>
<h3 id="flex-grow-项目的放大比例，默认为0"><a href="#flex-grow-项目的放大比例，默认为0" class="headerlink" title="flex-grow (项目的放大比例，默认为0)"></a>flex-grow (项目的放大比例，默认为0)</h3><blockquote>
<p>如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。<br>如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。</p>
</blockquote>
<p><img src="https://i.bmp.ovh/imgs/2021/03/cb7d2508279d6185.png"></p>
<h3 id="flex-shrink-项目的缩小比列，默认为1"><a href="#flex-shrink-项目的缩小比列，默认为1" class="headerlink" title="flex-shrink (项目的缩小比列，默认为1)"></a>flex-shrink (项目的缩小比列，默认为1)</h3><blockquote>
<p>如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小  </p>
</blockquote>
<ul>
<li><p>计算方式：<br>  <code>(项目n宽度*n的缩小比例/(项目1宽度*1的缩小比例)+...+(项目n宽度*n的缩小比例))*超出的宽度</code>  </p>
 <b style="color:red">
 100+400且flex-shrink都为1的子项目 父级为400 ，子项目超出100 </b>
 <br>
 <b style="color:red">
 100的子项目应该缩小的宽度：100*1/（100*1+400*1）=0.2  0.2*100 = 20</b>
 <br>
 <b style="color:red">
 400的子项目应该缩小的宽度：400*1/（100*1+400*1）=0.8  0.8*100 = 80</b>

</li>
</ul>
<p><img src="https://i.bmp.ovh/imgs/2021/03/f56618d2ccee3a1f.png"></p>
<h3 id="flex-basis-项目的固定空间-与width类似"><a href="#flex-basis-项目的固定空间-与width类似" class="headerlink" title="flex-basis (项目的固定空间 与width类似)"></a>flex-basis (项目的固定空间 与width类似)</h3><blockquote>
<p>length | auto(默认) | 百分比（主轴长度）</p>
</blockquote>
<ul>
<li>和<code>flex-grow</code>、<code>flex-shrink</code>一起使用的时候的计算方式</li>
</ul>
<pre><code>父容器主轴的长/宽 设置为`900`

所有元素都设置为` flex:1 `
其中`元素1`设置` flex-basis: 30% ` 
`元素2`设置`flex-grow: 2`

1. 先看`flex-basis`，获取到应有的长度
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 只有元素1设置了宽度</span></span><br><span class="line">width1 = <span class="number">900</span>*<span class="number">0.3</span> = <span class="number">270</span></span><br><span class="line">    </span><br></pre></td></tr></table></figure>

2. 因为设置了`flex-grow`，所有元素平分剩余的宽度
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 剩余 630</span></span><br><span class="line"><span class="comment">// 总份数： 1+2+1=4</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 元素1：占1份 </span></span><br><span class="line">    width1 = <span class="number">630</span>*(<span class="number">1</span>/<span class="number">4</span>) + <span class="number">270</span> = <span class="number">427.5</span></span><br><span class="line"><span class="comment">// 元素2：占2份 </span></span><br><span class="line">    width2 = <span class="number">630</span>*(<span class="number">2</span>/<span class="number">4</span>) = <span class="number">315</span></span><br><span class="line"><span class="comment">// 元素3：占1份 </span></span><br><span class="line">    width3 = <span class="number">630</span>*(<span class="number">1</span>/<span class="number">4</span>) = <span class="number">157.5</span></span><br></pre></td></tr></table></figure></code></pre>
<h3 id="flex-属性是flex-grow-flex-shrink-和-flex-basis的简写，默认值为0-1-auto。后两个属性可选"><a href="#flex-属性是flex-grow-flex-shrink-和-flex-basis的简写，默认值为0-1-auto。后两个属性可选" class="headerlink" title="flex (属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选 )"></a>flex (属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选 )</h3><blockquote>
<p>none  |  [  <code>&lt;flex-grow&gt;</code> <code>&lt;flex-shrink&gt;</code>?|| <code>&lt;flex-basis&gt;</code>  ]</p>
</blockquote>
<h3 id="align-self-属性允许单个项目有与其他项目不一样的对齐方式-默认为auto"><a href="#align-self-属性允许单个项目有与其他项目不一样的对齐方式-默认为auto" class="headerlink" title="align-self (属性允许单个项目有与其他项目不一样的对齐方式 默认为auto)"></a>align-self (属性允许单个项目有与其他项目不一样的对齐方式 默认为auto)</h3><blockquote>
<p>auto  |  flex-start  |  flex-end  |  center  |  baseline  |  stretch</p>
</blockquote>
<p><img src="https://i.bmp.ovh/imgs/2021/03/6301ffad376c5647.png"></p>
<h2 id="可视化"><a href="#可视化" class="headerlink" title="可视化"></a>可视化</h2><iframe id="cp_embed_mdRBNWB" src="//codepen.io/曾zZ/embed/mdRBNWB?height=400]&theme-id=dark&slug-hash=mdRBNWB&default-tab=[" scrolling="no" frameborder="no" height="400]" allowTransparency="true" allowfullscreen="true" class="cp_embed_iframe" style="width: 100%; overflow: hidden;"></iframe>
 
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
    </footer>
  </div>

    
 
   
</article>

    
    <article
  id="post-原型链"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2021/03/15/%E5%8E%9F%E5%9E%8B%E9%93%BE/"
    >原型链</a> 
</h2>
 

    </header>
     
    <div class="article-meta">
      <a href="/2021/03/15/%E5%8E%9F%E5%9E%8B%E9%93%BE/" class="article-date">
  <time datetime="2021-03-15T02:21:42.000Z" itemprop="datePublished">2021-03-15</time>
</a> 
  <div class="article-category">
    <a class="article-category-link" href="/categories/JavaScript/">JavaScript</a>
  </div>
   
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <blockquote>
<p>原型链有点懵 画了图好像理解了点  </p>
</blockquote>
<p><img src="https://ftp.bmp.ovh/imgs/2021/03/ebdaef31d93d10b5.png"></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// person的构造函数</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.name = name</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// person原型对象方法</span></span><br><span class="line">Person.prototype.eat = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;person eat&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// ...</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Student</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line">Student.prototype.sayhi = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;student sayhi&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">Student.prototype = <span class="keyword">new</span> Person(<span class="string">&#x27;doreen&#x27;</span>)</span><br><span class="line"><span class="keyword">var</span> stu = <span class="keyword">new</span> Student()</span><br><span class="line">stu.eat() <span class="comment">// person eat</span></span><br><span class="line">stu.sayhi() <span class="comment">// 报错 stu.sayhi is not a function</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// stu.__proto__  =&gt; new Person()</span></span><br><span class="line"><span class="comment">// stu.__proto__.__proto__ === Person.prototype</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><ul>
<li>构造函数可以实例化对象</li>
<li>构造函数中有一个属性叫<code>prototype</code>，是构造函数的<code>原型对象</code></li>
<li><code>原型对象</code>中有一个叫<code>constructor</code>的<code>构造器</code>，指向自己所在的<code>构造函数</code> </li>
<li>实例对象的<code>原型对象 (__proto__) </code>指向的是<code>构造函数的原型对象</code></li>
<li>构造函数中的<code>原型对象 (prototype) </code>中的方法是可以被实例对象直接访问</li>
</ul>
 
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
    </footer>
  </div>

    
 
   
</article>

    
  </article>
  

  
  <nav class="page-nav">
    
    <a class="extend prev" rel="prev" href="/">上一页</a><a class="page-number" href="/">1</a><span class="page-number current">2</span><a class="page-number" href="/page/3/">3</a><a class="page-number" href="/page/4/">4</a><span class="space">&hellip;</span><a class="page-number" href="/page/7/">7</a><a class="extend next" rel="next" href="/page/3/">下一页</a>
  </nav>
  
</section>
</div>

      <footer class="footer">
  <div class="outer">
    <ul>
      <li>
        Copyrights &copy;
        2019-2023
        <i class="ri-heart-fill heart_icon"></i> John Doe
      </li>
    </ul>
    <ul>
      <li>
        
      </li>
    </ul>
    <ul>
      <li>
        
        
        <span>
  <span><i class="ri-user-3-fill"></i>Visitors:<span id="busuanzi_value_site_uv"></span></s>
  <span class="division">|</span>
  <span><i class="ri-eye-fill"></i>Views:<span id="busuanzi_value_page_pv"></span></span>
</span>
        
      </li>
    </ul>
    <ul>
      
    </ul>
    <ul>
      
    </ul>
    <ul>
      <li>
        <!-- cnzz统计 -->
        
      </li>
    </ul>
  </div>
</footer>
      <div class="float_btns">
        <div class="totop" id="totop">
  <i class="ri-arrow-up-line"></i>
</div>

<div class="todark" id="todark">
  <i class="ri-moon-line"></i>
</div>

      </div>
    </main>
    <aside class="sidebar on">
      <button class="navbar-toggle"></button>
<nav class="navbar">
  
  <div class="logo">
    <a href="/"><img src="/images/avatar.webp" alt="Doreen&#39;s Blog"></a>
  </div>
  
  <ul class="nav nav-main">
    
    <li class="nav-item">
      <a class="nav-item-link" href="/">主页</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/categories">分类</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/archives">归档</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/about">关于我</a>
    </li>
    
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      
      <a class="nav-item-link nav-item-search"  title="Search">
        <i class="ri-search-line"></i>
      </a>
      
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
    </aside>
    <script>
      if (window.matchMedia("(max-width: 768px)").matches) {
        document.querySelector('.content').classList.remove('on');
        document.querySelector('.sidebar').classList.remove('on');
      }
    </script>
    <div id="mask"></div>

<!-- #reward -->
<div id="reward">
  <span class="close"><i class="ri-close-line"></i></span>
  <p class="reward-p"><i class="ri-cup-line"></i>请我喝杯咖啡吧~</p>
  <div class="reward-box">
    
    <div class="reward-item">
      <img class="reward-img" src="https://cdn.jsdelivr.net/gh/Shen-Yu/cdn/img/alipay.jpg">
      <span class="reward-type">支付宝</span>
    </div>
    
    
    <div class="reward-item">
      <img class="reward-img" src="https://cdn.jsdelivr.net/gh/Shen-Yu/cdn/img/wechat.jpg">
      <span class="reward-type">微信</span>
    </div>
    
  </div>
</div>
    
<script src="/js/jquery-2.0.3.min.js"></script>


<script src="/js/lazyload.min.js"></script>

<!-- Tocbot -->

<script src="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.css">
<script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/js/jquery.justifiedGallery.min.js"></script>

<script src="/dist/main.js"></script>

<!-- ImageViewer -->

<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" style="display:none" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.min.css">
<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"></script>

<script>
    function viewer_init() {
        let pswpElement = document.querySelectorAll('.pswp')[0];
        let $imgArr = document.querySelectorAll(('.article-entry img:not(.reward-img)'))

        $imgArr.forEach(($em, i) => {
            $em.onclick = () => {
                // slider展开状态
                // todo: 这样不好，后面改成状态
                if (document.querySelector('.left-col.show')) return
                let items = []
                $imgArr.forEach(($em2, i2) => {
                    let img = $em2.getAttribute('data-idx', i2)
                    let src = $em2.getAttribute('data-target') || $em2.getAttribute('src')
                    let title = $em2.getAttribute('alt')
                    // 获得原图尺寸
                    const image = new Image()
                    image.src = src
                    items.push({
                        src: src,
                        w: image.width || $em2.width,
                        h: image.height || $em2.height,
                        title: title
                    })
                })
                var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, {
                    index: parseInt(i)
                });
                gallery.init()
            }
        })
    }
    viewer_init()
</script>

<!-- MathJax -->

<!-- Katex -->

<!-- busuanzi  -->


<script src="/js/busuanzi-2.3.pure.min.js"></script>


<!-- ClickLove -->

<!-- ClickBoom1 -->

<!-- ClickBoom2 -->


<script src="/js/clickBoom2.js"></script>


<!-- CodeCopy -->


<link rel="stylesheet" href="/css/clipboard.css">

<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script>
  function wait(callback, seconds) {
    var timelag = null;
    timelag = window.setTimeout(callback, seconds);
  }
  !function (e, t, a) {
    var initCopyCode = function(){
      var copyHtml = '';
      copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
      copyHtml += '<i class="ri-file-copy-2-line"></i><span>COPY</span>';
      copyHtml += '</button>';
      $(".highlight .code pre").before(copyHtml);
      $(".article pre code").before(copyHtml);
      var clipboard = new ClipboardJS('.btn-copy', {
        target: function(trigger) {
          return trigger.nextElementSibling;
        }
      });
      clipboard.on('success', function(e) {
        let $btn = $(e.trigger);
        $btn.addClass('copied');
        let $icon = $($btn.find('i'));
        $icon.removeClass('ri-file-copy-2-line');
        $icon.addClass('ri-checkbox-circle-line');
        let $span = $($btn.find('span'));
        $span[0].innerText = 'COPIED';
        
        wait(function () { // 等待两秒钟后恢复
          $icon.removeClass('ri-checkbox-circle-line');
          $icon.addClass('ri-file-copy-2-line');
          $span[0].innerText = 'COPY';
        }, 2000);
      });
      clipboard.on('error', function(e) {
        e.clearSelection();
        let $btn = $(e.trigger);
        $btn.addClass('copy-failed');
        let $icon = $($btn.find('i'));
        $icon.removeClass('ri-file-copy-2-line');
        $icon.addClass('ri-time-line');
        let $span = $($btn.find('span'));
        $span[0].innerText = 'COPY FAILED';
        
        wait(function () { // 等待两秒钟后恢复
          $icon.removeClass('ri-time-line');
          $icon.addClass('ri-file-copy-2-line');
          $span[0].innerText = 'COPY';
        }, 2000);
      });
    }
    initCopyCode();
  }(window, document);
</script>


<!-- CanvasBackground -->


<script src="/js/dz.js"></script>



    
  </div>
</body>

</html>